knockout + require + director 构建单页面程序(knockout)

接下来介绍knockout的在前一篇文章中的基础上的应用。

当然首先的显示下载本章所需要的文件knockout.js 和knockout-amd-helpers.js，knockout-amd-helpers.js在本章节中主要的作用在于knockout在渲染模板时可以直接渲染整个html文件，而不用在当前web页面中定义模板。

二，引入相应文件之后的项目结构如下：

三，在引入knockout应用之后，我们来看一下对应文件的变化：

（1）首先是index.cshtml的变化

<script data-main="/Scripts/framework/main" src="/Scripts/lib/require.js"></script>
<main id="main" data-bind="template: { name: 'KnockoutIntroduction-html', data: require('KnockoutIntroduction-js').data, afterRender: require('KnockoutIntroduction-js').afterRender}"></main>

这里我们将要使用knokcout的template的功能，使用template渲染我们的html 模板，当然不此时的渲染不成功的，因为我们并未在当web页面中定义名为KnockoutIntroduction-html的template。

name: 'KnockoutIntroduction-html'

（2）想要（1）中的code可以正常运行出来，我们需要使用我们一开始引入的knockout-amd-helpers.js这个文件，那我们看一下main.js究竟要怎么样才可以实现。

/*Author: TSDate: 2016/12/24Description: It's the main entry point for require.*/var paths = {/* TODO: register all AMD modules by providing CamelCase aliases, exceptions are RequireJS plugins and named AMD modules, whose names are fixed *//* follow files dictionary order */'jquery': 'Scripts/lib/jquery',"text": "Scripts/lib/text",'knockout': 'Scripts/lib/knockout',"knockout-amd-helpers": "Scripts/lib/knockout-amd-helpers",//Require'RequireIntroduction-html': 'templates/require/RequireIntroduction.html',"RequireIntroduction-js": 'Scripts/app/require/RequireIntroduction',//Knockout'KnockoutIntroduction-html': 'templates/knockout/KnockoutIntroduction.html','KnockoutIntroduction-js': 'Scripts/app/knockout/KnockoutIntroduction',
};var baseUrl = '/';require.config({baseUrl: baseUrl,paths: paths,shim: {}
});require(["knockout", "KnockoutIntroduction-js", "knockout-amd-helpers", "text"], function (ko, knockoutIntroduction) {ko.bindingHandlers.module.baseDir = "modules";//fruits/vegetable modules have embedded templateko.bindingHandlers.module.templateProperty = "embeddedTemplate";ko.applyBindings(knockoutIntroduction);
});//require(["jquery", "RequireIntroduction-js", "text!RequireIntroduction-html"],
//    function ($, module, html) {
//        console.log("Start test require html!");
//        $('#main').html(html);
//        console.log("Start test require js!");
//        module.TestRequireJs();
//    }
//);

从main.js文件中我们可以看到path中引入了knockout和knockout-amd-helpers.js，以及我们测试knockout的html和js文件。最终要的是最后的代码

require(["knockout", "KnockoutIntroduction-js", "knockout-amd-helpers", "text"], function (ko, knockoutIntroduction) {ko.bindingHandlers.module.baseDir = "modules";//fruits/vegetable modules have embedded templateko.bindingHandlers.module.templateProperty = "embeddedTemplate";ko.applyBindings(knockoutIntroduction);
});

这行代码的作用在于我们使用knockout template的时候可以直接使用require（key）来加载单独的html文件，具体的实现我没有去研究过，我猜想一下：请看上面代码中注释代码，这是我们上一章中的代码，当时我们使用text插件可以require 单独的html文件，那knockout-amd-helpers.js 的实现应该是在text!html的基础上内部会包装一下我们的这个html template 形成一个template可以识别的还是template 模板，当然这只是我的猜想，希望知道的朋友可以说明一下。

最后一行的ko.applyBinding(knockoutIntroduction)就只是knockout的绑定对应的element，这个地方没有明文支出需要绑定的element，就会默认绑定到document上。

四，测试knockout：

测试之前我们先看一下KnockoutIntroduction对应的html和js文件。

<div>This is the page for knockout!.<input data-bind="value: PageName"/>
</div>

define(['knockout'], function (ko) {function RequireIntroductionViewModel() {var self = this;self.data = {PageName: ko.observable('knockout')}self.afterRender = function () {console.log('This is the function named afterRender in knockout.js');}}return new RequireIntroductionViewModel();
});

从以上的代码中我们看出如果代码运行正常，web页面上会出现对应的html的文字描述以及一个input，input的内容就是js文件data.PageName的值‘knockout’，并且控制台上打出afterRender function中的内容。

那我们来看一下页面上的显示：

可以看到页面上的显示就是我们想要的结果。

五，总结：

这篇文章中我们将之前页面中的html单独文件的渲染使用knockout template实现，就像本篇文中一开始介绍的项目结构图，knockout此时操作的是在require控制的html的操作，请注意看一下图中连线的范围，这样做的目的是什么呢？目的在于require控制下的文件使我们可以很方便的去操作这下文件，而且如果我们将main.js文件中template中的name设置成一个可变的falge会怎么样呢，我们改变这个flag值，是不是就会渲染不同的html页面，具体的内容会在接下来的文章介绍！

源代码：https://github.com/rodchen-king/knockout_require_director/tree/v1.2

knockout + require + director 构建单页面程序(knockout)相关推荐

前端复盘: knockout + require + director 构建单页面程序
关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维目前react,vue,angular等框架都支持单页面程序,最近在回顾一些知识,想起刚毕业的时候接触到knockou ...
给大家推荐一个Vue 单页面程序无法SEO的解决办法
给大家推荐一个vue 单页面搜索引擎无法SEO的解决办法这两天用Vue3做了一个免费下载书籍的小网站,https://book.usejs.cn:大家可以先看下效果前端项目做完.部署了之后想让搜索 ...
基于angularjs的单页面实例_基于AngularJs的单页面程序
基于AngularJs的单页面程序在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...
为什么说单页面程序SEO不友好？
搜索引擎的工作原理在搜索引擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是被称之为"搜索引擎蜘蛛"或"网络爬虫&q ...
[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）
前言某天张三对小花说,我需要在一台新电脑上实现一个前端的漂亮页面:比如京东手机首页(m.jd.com). 小花这时吭哧吭哧的去新电脑上安装nodejs.npm,然后在本地使用npm构建vue3项目, ...
vue单页面程序对谷歌GA事件的应用
公司运营最近在对网页做用户转化率调查这块,找到了谷歌GA事件.按照之前GA官网给出的文档,把代码加入到了index.html里面,一周后发现统计出来的数据跟后台数据库对比对不上. 经过一番研究后,发现 ...
新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用 ...
通过Web Api 和 Angular.js 构建单页面的web 程序
在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端, ...
基于angularjs的单页面实例_angularjs实例网站
客户端 JavaScript 的 5 个弊端译注:原来的标题是:"我们为啥不用AngularJS:-",后来作者觉得不妥就改掉了,因为AngularJS是通常适用于单页面程序框架 ...

knockout + require + director 构建单页面程序(knockout)

knockout + require + director 构建单页面程序(knockout)相关推荐

最新文章

热门文章