KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定
本节目录:
- 一个例子
- API
- 备注1:仅模板式的component
- 备注2:component虚拟绑定
- 备注3:传递标记到component绑定
- 内存管理
一个例子
First instance, without parameters
Second instance, passing parameters
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 第四章 数据绑定(5) 控制流component绑定的更多相关文章
- KnockoutJS 3.X API 第四章 数据绑定(2) 控制流foreach绑定
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...
- KnockoutJS 3.X API 第四章 数据绑定(3) 控制流if绑定和ifnot绑定
if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑 ...
- KnockoutJS 3.X API 第四章 数据绑定(4) 控制流with绑定
with绑定的目的 使用with绑定的格式为data-bind="with:attribute",使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定.with绑定内部的所 ...
- KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定
目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的 ...
- KnockoutJS 3.X API 第四章(13) template绑定
目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...
- KnockoutJS 3.X API 第四章 表单绑定(11) options绑定
目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...
- KnockoutJS 3.X API 第四章 表单绑定(6) click绑定
目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked timesClick me var viewM ...
- KnockoutJS 3.X API 第四章 表单绑定(7) event绑定
目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var vi ...
- KnockoutJS 3.X API 第四章 表单绑定(8) submit、enable、disable绑定
submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中 ...
随机推荐
- 关于Java线程意外退出自动重启..
最近做项目使用到第三方推送功能,然后创建了一个线程用来循环读取队列中的数据,当队列为空时,则线程暂停2秒.一切都像想象中的辣么美好.可是在后面的测试中发现收不到推送的消息了,接着发现了原来推送的线程由 ...
- wince中测试驱动应用程序的实现
这里建的工程是MFC的smart device,选择ARMV4I的指令集,不同的设备可能会有轻微的不同,不过大体实现是一样滴.还有,这里选的应用类型是dialog base. 1.应用监测内核动向 内 ...
- iOS进阶_地图上定位的标志——大头针
一.添加大头针 地图使用的框架是MapKit 大头针走的是MKAnnotation协议 /* 注意:因为是满足协议MKAnnotation,所以没有MKAnnotation的系统大头针类,必须自定义大 ...
- shell学习
set -x 进入调试模式,会把每一个命令实际执行的命令打印出来,也就是会把一些参数扩展后的样子打印出来. set +x 退出调试模式自定义变量:x=7,y=8echo `expr $x + $y` ...
- Html总结及日志目录
Html就是超文本标记语言的简写,是最基础的网页语言,代码都是由标签所组成,不用区分大小写. 1. Html代码由<html>开始</html>结束.里面由头部分<hea ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案
此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...
- 【sqlyog(mysql)Test Connection功能实现的原理】
sqlyog这个软件中有:Test Connection(测试连接)这样的一个功能, 现在我的开发环境是java和mysql,接下来一起探索这个功能的实现过程:
- JavaScript调试工具
最常用的最有效的有三个: 1. FireFox浏览器的Firebug,我用得不多 2. IE 8浏览器的Microsoft Script Editor.当运行网页的脚本出错时,会报错,如下所示: 单击 ...
- 解剖SQLSERVER 第三篇 数据类型的实现(译)
解剖SQLSERVER 第三篇 数据类型的实现(译) http://improve.dk/implementing-data-types-in-orcamdf/ 实现对SQLSERVER数据类型的解 ...