component: <component-name> OR component: <component-object>
此绑定用于将组件插入DOM元素并可选地传递参数。 这种绑定可以通过以下两种方式实现 -
- Shorthand Syntax
- Full syntax
速记语法
在此方法中，仅指定组件名称而不指定任何参数。
Syntax
<div data-bind = 'component: "component-name"'></div>
传递的参数值可以是可观察的。 因此，每当可观察的更改时，将丢弃旧的组件实例，并且将根据刷新的参数值创建新的组件实例。
完整的语法
此方法以对象的形式接受参数。
Syntax
<div data-bind = 'component: {
name: "component-name",
params: { param1: value1, param2:value2 ...}
}'></div>
该对象由以下两项组成 -
name - 这是要插入的组件的名称。 如前所述，这可以是一个可观察的。
params - 这是一个传递给组件的对象。 大多数情况下，这将是一个包含多个参数的键值对象。 这是ViewModel的构造函数收到的大部分时间。
组件处理工作流程
下图说明了通过组件绑定注入组件时发生的过程。
让我们详细看一下这个过程 -
Receive ViewModel factory and template from component loaders - T默认加载器请求并接收已注册的ViewModel和模板。 默认情况下，这是一个异步过程。
Clone the component template - 在此步骤中，将克隆组件模板并将其插入DOM元素。 现有内容（如果有）将被删除。
Instantiate a ViewModel if any - 在此步骤中，将实例化ViewModel。 如果ViewModel作为构造函数提供，则KO调用。
new ViewModelName(params)
如果ViewModel以工厂函数格式提供，即createViewModel则KO调用。
createViewModel(params, yourcomponentInfo)
这里yourcomponentInfo.element是插入模板的元素。
Bind ViewModel to view - 在此阶段，ViewModel绑定到View。 如果未提供ViewModel，则使用组件绑定中提到的参数进行绑定。
Now component is ready - 在此阶段，组件已准备就绪并处于正常运行状态。 该组件密切关注可观察的参数（如果有的话），以便写入更改的值。
Dispose the ViewModel if the component is lost ，则调用ViewModel - 如果组件绑定名称值被显着更改，或者某个控制流绑定删除了DOM元素容器本身（用于保存组件输出），则调用ViewModel的dispose函数。 dispose发生在从DOM中删除任何元素容器之前。
Example
让我们看一下下面的示例，该示例演示了组件绑定的用法。
<!DOCTYPE html>
<head>
<title>KnockoutJS Component binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h4>Component binding without parameters</h4>
<div data-bind = 'component: "calculate-sum"'></div>
<h4>Component binding passing parameters</h4>
<div data-bind = 'component: {
name: "calculate-sum",
params: { number1: 2, number2: 3 }
}'></div>
<script>
ko.components.register('calculate-sum', {
viewModel: function(params) {
this.number1 = ko.observable(params && params.number1);
this.number2 = ko.observable(params && params.number2);
this.result = ko.computed(function() {
var sum = Number(this.number1()) + Number(this.number2());
if ( isNaN(sum) )
sum = 0;
return sum;
},this);
},
template: 'Enter Number One: <input data-bind = "value: number1" /> <br> <br>'+
' Enter Number Two: <input data-bind = "value: number2" /> <br> <br>'+
' Sum = <span data-bind = "text: result" />'
});
ko.applyBindings();
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在component-bind.htm文件中。
在浏览器中打开此HTML文件。
在两个文本框中输入数字，并观察总和是否已计算出来。
观察 (Observations)
仅模板组件
可以在没有ViewModel的情况下创建组件。 该组件可以仅包括如下所示的模板。
ko.components.register('my-component', {
template: '<div data-bind = "text: productName"></div>'
});
DOM看起来像 -
<div data-bind = 'component: {
name: "my-component",
params: { productName: someProduct.name }
}'></div>
使用没有DOM容器元素的Component绑定
可能存在无法将组件插入DOM元素的情况。 基于如下所示的注释标记，仍然可以在无容器语法的帮助下执行基本绑定。
和用作开始和结束标记，使其成为虚拟语法，并将数据绑定为真正的容器。
内存管理和处置
可以选择添加处置功能作为ViewModel的一部分。 如果包含此函数，则只要组件丢失或容器元素本身被删除，就会调用它。 使用dispose函数释放不需要的对象所占用的资源是一种很好的做法，这些对象在默认情况下不是可垃圾回收的。 以下是一些例子 -
setInterval方法将继续运行，直到明确清除。 clearInterval（句柄）用于停止此过程。
ko.computed属性需要明确处理。 否则，他们可能仍会继续接收来自其基础观察者的通知。 使用纯计算函数可以避免手动处理。
确保在订阅上使用dispose（）方法，否则它会一直触发更改，直到处理完毕。
需要处理在DOM元素上创建并在createViewModel中创建的自定义事件处理程序。
