knockoutjs动态加载外部的file作为component中的template数据源的实现方法


Posted in Javascript onSeptember 01, 2016

玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template,比如下面这样:

ko.components.register('message-editor', {
viewModel: function(){},
template:""
});

很显然,viewmodel就是function函数区,而template就是模板区,然后通过register函数将component注册到knockout中,下面我们演示一个简单的功能,就是动态的显示当前“input”内容的length长度。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.8.2.js"></script>
<script src="knockoutjs.js"></script>
</head>
<body>
<div data-bind='component: "message-editor"'></div>
<script type="text/javascript">
ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: 'Message: <input data-bind="value: text" /> '
+ '(length: <span data-bind="text: text().length"></span>)'
});
ko.applyBindings();
</script>
</body>
</html>

请仔细看一下这段代码,当前的component会将template模板inject到html的div的标签中,而且这个template标记中还有一个text元素的绑定,而这个(text().length)的数据源刚好就是viewModel中的this.text..对吧。。。有了这两个的合一,我们最后的html展示如下:

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

接下来我们随便输入一些数字,移开鼠标,这个时候会触发input的change事件,比如下面这样。

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

是不是好吊??? 当然有些人可能要问,如果在input呈现的时候赋予一点默认值呢???可不可以呢?当然也是可以的,这个时候我们可以在data-bind中默认赋予值就ok啦。。。比如下面这样:

<body>
<h4>Second instance, passing parameters</h4>
<div data-bind='component: { name: "message-editor", params: { initialText: "Hello, world!" }}'></div>
<script type="text/javascript">
ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: 'Message: <input data-bind="value: text" /> '
+ '(length: <span data-bind="text: text().length"></span>)'
});
ko.applyBindings();
</script>
</body>

可以看到,上面的代码中我通过在component中的params对象中加入一个initialText属性,这个时候就可以将这个initialText动态的注入到我们的viewModel中,然后我们的input和span元素通过data-bind 订阅了这个viewModel中的this.text监控属性,这个时候就出现了实时更新操作了,迫不及待的看一下吧~

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

一:问题分析

好了,通过上面的演示,你或许发现到了如下两个问题,第一个问题就是好强大,只要你register就可以了,根本不需要通过applyBindings来施加一个viewmodel,这样就实现了页面的模块化,真的好便捷~ 所以这个问题是一个好事情, 第二个问题就是我们的template模板中的内容是通过“硬编码“的形式,也就是如果这个内容有很多,比如有100行,200行,那我们是不是疯了??? 就是你能耐再大也没法一一拼接起来,就算拼起来,维护成本也太大了,所以问题来了,如何将template的content动态化??? 比如现实中我们看到的 百度文库 的页面。。。如下图:

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

这个页面中,有很多的模块,比如我圈出来的上面3个,这三个模块中的html肯定还是很多的吧~~~

二:template动态获取

html内容的动态获取,通常有两种方式,第一种就是RequireJs,当然你需要引用这么一个js,第二种就是我们重写他们的模板,当然这篇我们讲解后面的这种方式,我们要做的就是重写component中的loadTemplate函数,然后替换默认的defaultLoader加载器,是不是很简单呢???

1. 重写loadtemplate方法

//第一步:重写loadTemplate方法
var templateFromUrlLoader = {
loadTemplate: function(name, templateConfig, callback) {
if (templateConfig.fromUrl) {
var fullUrl = '/' + templateConfig.fromUrl
//ajax动态获取外部的file内容
$.get(fullUrl, function(markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};
//替换原来的defaultLoader,实现新的templateFromUrlLoader
ko.components.loaders.unshift(templateFromUrlLoader);

2. 将hard codeing 放入到外部的file,比如我新建了一个file.html文件。

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

3. 再register组件,然后在template标记上引用外面文件路径,比如下面的{ fromUrl: 'file.html' }

ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: { fromUrl: 'file.html' },
});

好了,所有功能都准备完毕了,我们浏览一下页面,看看是啥样的???

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

终于大功搞成了,对不对撒~~~然后是不是就可以延伸到上面介绍的“百度文库”的例子,我们可以把各个模块的html放到一个单独的文件中.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.8.2.js"></script>
<script src="knockoutjs.js"></script>
</head>
<body>
<div data-bind='component: { name: "message-editor", params: { initialText: "你好撒!!!" }}'></div>
<script type="text/javascript">
//第一步:重写loadTemplate方法
var templateFromUrlLoader = {
loadTemplate: function (name, templateConfig, callback) {
if (templateConfig.fromUrl) {
var fullUrl = '/' + templateConfig.fromUrl
//ajax动态获取外部的file内容
$.get(fullUrl, function (markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};
//替换原来的defaultLoader,实现新的templateFromUrlLoader
ko.components.loaders.unshift(templateFromUrlLoader);
ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: { fromUrl: 'file.html' },
});
ko.applyBindings();
</script>
</body>
</html>

以上所述是小编给大家介绍的knockoutjs动态加载外部的file作为component中的template数据源的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习jquery之一
Apr 27 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 #Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 #Javascript
ES6记录异步函数的执行时间详解
Aug 31 #Javascript
基于angularjs实现图片放大镜效果
Aug 31 #Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 #Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 #Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 #Javascript
You might like
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
详解Python中的正则表达式的用法
2015/04/09 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
加拿大探亲邀请信
2014/01/28 职场文书
会计专业自我鉴定
2014/02/10 职场文书
投资意向书
2014/07/30 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
督导岗位职责
2015/02/04 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python