自定义组件和标签
2016-11-25 本文已影响92人
白水螺丝
组件是一个强大的，干净的方式组织您的UI代码变成自包含，可重复使用的块。 他们有以下的好处：
- 可以表示单独的控件/窗口小部件，或应用程序的整个部分
- 包含自己的视图，通常（但可选）自己的viewmodel
- 可以通过AMD或其他模块系统预加载或异步加载（按需）
- 可以接收参数，并可选地将更改写回到它们或调用回调
- 可以组合在一起（嵌套）或继承自其他组件
- 可以轻松地打包，以便跨项目重用
- 让你定义自己的约定/逻辑进行配置和加载
此模式有利于大型应用程序，因为它通过明确的组织和封装简化了开发，并通过根据需要增量式加载应用程序代码和模板来帮助提高运行时性能。
自定义元素是用于消费组件的可选但方便的语法。 不需要使用绑定注入组件的占位符<div>，您可以使用具有自定义元素名称的更多自描述标记（例如，<voting-button>或<product-editor>）。 Knockout小心确保兼容性，即使与旧的浏览器，如IE 6。
示例：喜欢/不喜欢小部件
可以使用ko.components.register注册组件（技术上，注册是可选的，但它是最简单的入门方式）。 组件定义指定一个viewModel和模板。 例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件与自定义标签</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/knockout.3.4.1.js"></script>
</head>
<body>
<div id="test">
<div data-bind='component: {
name: "like-widget",
params: { value: like }
}'></div>
</div>
<script type="text/javascript">
ko.ob = ko.observable;
ko.oba = ko.observableArray;
//注册一个组件
ko.components.register('like-widget', {
template:
'<div class="like-or-dislike" data-bind="visible: !chosenValue()">\
<button data-bind="click: like">Like it</button>\
<button data-bind="click: dislike">Dislike it</button>\
</div>\
<div class="result" data-bind="visible: chosenValue">\
You <strong data-bind="text: chosenValue"></strong> it\
</div>'
,viewModel: function(params) {
var _this = this;
this.chosenValue = params.value;
_this.like = function() {
_this.chosenValue('like');
}
_this.dislike = function() {
this.chosenValue('dislike');
}.bind(_this);
}
});
var vm = {
like:ko.ob(false)
}
ko.applyBindings(vm,$("#test").get(0));
</script>
</body>
</html>
根据需要从外部文件加载类似/不喜欢小部件
在大多数应用程序中，您需要将组件视图模型和模板保留在外部文件中。 如果将Knockout配置为通过AMD模块加载器（如require.js）提取它们，则可以预加载（可能捆绑/压缩）或根据需要逐步加载。
ko.components.register('like-or-dislike', {
viewModel: { require: 'files/component-like-widget' },
template: { require: 'text!files/component-like-widget.html' }
});
为了这个工作，文件files / component-like-widget.js和files / component-like-widget.html需要存在。 检查出来（并查看源代码上的.html） - 正如你将看到的，这是更清洁和更方便，包括定义中的内联代码。
此外，您需要引用一个合适的模块加载器库（例如require.js）或实现一个知道如何抓取您的文件的自定义组件加载器。
总结
- 在knockout里viewmodel只能绑定到一个dom节点上，该节点本身或者节点的内部子节点都不能再继续绑定viewmodel，即，不能再继续使用ko.applyBindings方法
- 按照上诉的理论，虽然不能再次绑定viewmodel，但是一个viewmodel里面是可以存在多个knockout组件，即 自定义标签。每个自定义标签也相当于一个viewmodel，而且最外层根viewmodel可以通过参数的传递给各个自定义组件的viewmodel来达到相互绑定，改变UI的方法。
