一个例子

用户界面源代码：

h4First实例，不带参数/h4div数据-绑定='component: '消息编辑器' '/divh4Second实例，传递参数/h4div数据-绑定='component: {name: '消息编辑器'，params 3360 { initialtext : ' Hello，world！}}'/div视图模型源代码：

ko.components . register(' message-editor '，{ viewmodel : function(params){ this . text=ko . observatory(params params . initialtext | | ' ')；}，template: 'Message:输入数据-绑定='value: text' /' '(长度： span数据-绑定='text: text()。长度'/span)' })；ko . applybindings()；这只是一个非常简单的例子。在开发中，视图模型和模板通常被编写为单独的外部文件，然后通过ko的components.register方法进行注册，这将在未来的KO高级应用程序系列中进一步解释。

应用程序接口

使用组件绑定有两种绑定语法

1.快速语法：

只传递一个字符串作为组件名比提供任何参数都好。例如：

div data-bind=' component : ' my-component ' '/div如果您认为这种写法有些死板，那么也可以传递一个监视属性，并使用它的值作为组件名。将来组件名称发生变化时，直接修改监控属性值：

div data-bind=' component : observablewhosevalueisacomponent name '/div 2。完整语法：

提供如下完整的组件参数：

名称-注射组件的名称。您可以使用字符串或监控属性。

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

例如：

Div数据-绑定='组件： {名称： '购物车'，参数： {模式3360 '详细列表'，项目：产品列表}}'/div注意1:仅基于模板的组件

通常的组件绑定有视图模型和模板，但这不是必需的。有时一个组件可能只包含一个模板。例如：

ko.components . register(' special-offer '，{ template : ' div class=' offer-box ' data-bind=' text : ProductName '/div ' })；您可以通过以下方式将视图模型注入模板：

Div数据-绑定=' component: {name: '特别优惠-标注'，params 3360 { product name : some product。name}}'/div用于注入视图模型或使用customer元素(在后面的高级章节中解释)。

特价参数=' productname:some某些产品。name'/special-offer如上例，HTML标记是模板名称，视图模型被注入到它的属性参数中。

注2:组件虚拟绑定

就像上一章的虚拟绑定一样，用的是一样的！- ko -还有！- /ko -这种方式实现了虚拟绑定，达到了不改变DOM元素的目的

！- ko component: '消息编辑器'-！- /ko -传递参数的示例：

！-ko component : { name : ' message-editor '，params 3360 { initialtext : ' Hello，world！'，otherParam: 123 }} -！- /ko -备注3:将标记传递给组件绑定

div data-bind=' component : { name : ' my-special-list '，params 3360 { items : somarerayofppeople } } '！-看，这里有一些任意的标记。默认情况下，它被剥离出来，由组件输出替换。-em data-bind=' text : name '/Emis em data-bind=' text : age '/em years。/div在上面的例子中，既有组件绑定，也有一些DOM元素。绑定后，my-special-list组件将与这些DOM元素形成一个新的UI界面。在未来的高级章节中，我们将提到一个自定义组件绑定DOM标签的例子。期待吧。先卖个锁吧~。

内存管理(理解就好，不要深究)

您的视图模型类可能具有dispose函数。如果运行，KO会调用这个函数删除内存中的组件，并从DOM中删除它们。

在下列情况下，您必须使用dispose来释放垃圾收集资源。例如：

在setInterval回调之后，需要显式清除它。

使用clearInterval(句柄)来清除它们，否则视图模型就驻留在内存中。

Ko.computed被回调，直到它被显式设置为从依赖项接收通知。

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

捐款回掉后，需要明确清除。

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

例如：

var somexternalobservable=ko。可观察的(123)；函数somcomponentviewmodel(){ this。我的计算=ko。computed(function(){ return somexternaloobservable()^ 1；},这个);这个。mypurecouted=ko。purecouted(function(){ return someexternalobservable())2；},这个);这个。MySubscription=somexternaloobservable。subscribe(function(val){ console。日志('外部可观测值更改为val’)；},这个);这个。myintervalhandle=window。setinterval(function(){ console。日志('又过去了一秒，组件还活着。');}, 1000);} somcomponentviewmodel。原型。dispose=function(){ this。我的电脑。dispose()；这个。我的订阅。dispose()；窗户。clearinterval(这个。my interval handle)；//这个。我的purecouted不需要手动处置{ ko。组件。注册(' your-component-name '，{ view model : someocomponent view model，template : ' some template ' })；以上所述是小编给大家介绍的敲门联署材料3 .十、原料药第四章之数据控制流成分绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！