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元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中 ...
随机推荐
- bower
1. bower介绍 Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. ...
- Changing the Color of Linux ls Command 改变Linux的ls命令显示的颜色
Linux command ls basically use the file /etc/DIR_COLORS or /etc/DIR_COLORS.xterm to define the color ...
- MFC 关于如何实现浏览文件
在做界面的时候,如果涉及到文件,就要输入文件的地址 第一种方法是直接输入,嗯...╮( ̄▽ ̄)╭ 第二种方法就是常见的浏览,然后选择文件<( ̄︶ ̄)/ 其代码如下: CString filena ...
- RHEL6p5下ntfs分区的挂载及自动挂载
No.1: #uname -a //查看你的Linux内核版本的命令 No.2:去http://www.atrpms.net/dist/el5/fuse/下载与内核接近的三个东西 fuse-libs- ...
- 解决ViewPage中嵌套有ListView或者滑动手势等造成滑动的冲突
public class ViewPagerCompat extends ViewPager { //mViewTouchMode表示ViewPager是否全权控制滑动事件,默认为false,即不控制 ...
- Happy Programming Contest(ZOJ3703)(01背包+路径储存)
Happy Programming Contest ZOJ3703 老实说:题目意思没看懂...(希望路过的大神指点) 最后那个the total penalty time是什么意思啊!!! 还是学 ...
- 【leetcode】Trapping Rain Water
Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
- 12G服务器在BIOS中收集阵列卡日志(TTY日志)的方法
如果系统进不去.请参考如下方法收集日志. 请准备个U 盘,容量在8G以下(含8G),否则会识别不到. 图片参考,以描述为准 F2 enter BIOS option--> Enter the ...
- Apache HttpAsyncClient 如何设置per request timeout
最近做一个项目时用到HttpAsyncClient:因项目所需,要求能对一个具体的request 设置连接和读写超时:但发现在HttpAsyncClient中,只有在创建一个HttpAsyncClie ...
- 从MySQL5.7.6开始,安装MySQL提示“请键入 NET HELPMSG 3534 以获得更多的帮助”的解决办法
今天安装MySQL提示如下错误: ----------------------------------------------------------------------------------- ...