KnockoutJS 3.X API 第四章之数据控制流component绑定


Posted in Javascript onOctober 10, 2016

一个例子

KnockoutJS 3.X API 第四章之数据控制流component绑定

UI源码:

<h4>First instance, without parameters</h4>
<div data-bind='component: "message-editor"'></div>
<h4>Second instance, passing parameters</h4>
<div data-bind='component: {
name: "message-editor",
params: { initialText: "Hello, world!" }
}'></div>

视图模型源码:

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();

这只是一个非常简单的例子,在开发中,一般都是将View Model和Template写成单独外部文件,然后通过ko的components.register方法注册他们,在以后的KO高级应用系列中将会进一步讲解。

API

使用component绑定有两种绑定语法

1. 快速语法:

只传递一个字符串作为组件名称,比提供任何参数。例如:

<div data-bind='component: "my-component"'></div>

如果你觉得这种写法有些死板的话,也可以传递一个监控属性,用其值作为组件名称。待以后组件名变化的时候,直接修改监控属性值即可:

<div data-bind='component: observableWhoseValueIsAComponentName'></div>

2.完整语法:

提供完整的组件参数,参数如下:

name - 注入组件的名称。可使用字符串或是监控属性。

params - 一组参数对象。通常,这是一个包含多个参数的键值对。

例如:

<div data-bind='component: {
name: "shopping-cart",
params: { mode: "detailed-list", items: productsList }
}'></div>

备注1:仅模板式的component

通常的component绑定具有ViewModel和Template,但是这并不是必须的,有些时候一个component可能只包含一个Template。例如:

ko.components.register('special-offer', {
template: '<div class="offer-box" data-bind="text: productName"></div>'
});

可以使用注入的方式,将视图模型注入给Template:

<div data-bind='component: {
name: "special-offer-callout",
params: { productName: someProduct.name }
}'></div>

在或者使用客户元素(以后的高级章节讲解)进行注入视图模型。

<special-offer params='productName: someProduct.name'></special-offer>

如上例子,HTML标记为模板名称,其属性params中注入视图模型。

备注2:component虚拟绑定

如同之前章节的虚拟绑定一样,同样是使用<!-- ko -->和<!-- /ko -->这种方式实现虚拟绑定,来达到不更改DOM元素的目的

<!-- ko component: "message-editor" -->
<!-- /ko -->

传参的例子:

<!-- ko component: {
name: "message-editor",
params: { initialText: "Hello, world!", otherParam: 123 }
} -->
<!-- /ko -->

备注3:传递标记到component绑定

<div data-bind="component: { name: 'my-special-list', params: { items: someArrayOfPeople } }">
<!-- Look, here's some arbitrary markup. By default it gets stripped out
and is replaced by the component output. -->
The person <em data-bind="text: name"></em>
is <em data-bind="text: age"></em> years old.
</div>

如上例子中,既有component绑定,也有一些DOM元素,当绑定后,my-special-list组件将会和这些DOM元素组成一个新的UI界面。在未来高级章节中,我们将会提到一个带有DOM标记的自定义companent绑定的例子。尽情期待。先卖个关子~。

内存管理(了解即可,切勿钻牛角尖)

您的视图模型类可能有一个dispose函数。如果得以运行,KO将调用这个函数在内存中删除组件,并从DOM中删除。

在一下情况,您必须使用dispose以释放垃圾收回资源。例如:

setInterval 回调后,需要明确清除。

使用clearInterval(handle)去清除他们,否则视图模型在内存常驻。

ko.computed 回调后,直到明确设置成从它们的依赖接收通知。

如果一个依赖关系是外部的对象,那么一定要使用.dispose()来释放计算监控属性,否则(也可能你的视图模型)将在内存常驻。另外,可以考虑使用一个pureComputed,以避免人工处理的需求。

Subscriptions 回掉后,需要明确清除。

如果您已经预订到外部观察时,一定要使用.dispose(),否则回调(也可能您的视图模型)将在内存中常驻。

例如:

var someExternalObservable = ko.observable(123);
function SomeComponentViewModel() {
this.myComputed = ko.computed(function() {
return someExternalObservable() + 1;
}, this);
this.myPureComputed = ko.pureComputed(function() {
return someExternalObservable() + 2;
}, this);
this.mySubscription = someExternalObservable.subscribe(function(val) {
console.log('The external observable changed to ' + val);
}, this);
this.myIntervalHandle = window.setInterval(function() {
console.log('Another second passed, and the component is still alive.');
}, 1000);
}
SomeComponentViewModel.prototype.dispose = function() {
this.myComputed.dispose();
this.mySubscription.dispose();
window.clearInterval(this.myIntervalHandle);
// this.myPureComputed doesn't need to be manually disposed.
}
ko.components.register('your-component-name', {
viewModel: SomeComponentViewModel,
template: 'some template'
});

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之数据控制流component绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js clearInterval()方法的定义和用法
Nov 11 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
浅谈jquery中使用canvas的问题
Oct 10 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Django中处理出错页面的方法
2015/07/15 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
一年级数学教学反思
2014/02/01 职场文书
公司委托书格式
2014/08/01 职场文书
先进教师事迹材料
2014/12/16 职场文书
工程主管竞聘书
2015/09/15 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫