Knockout 最近发布了 3.2.0 版本,这次更新最大的改进之一就是引入了组件(Component)的概念,通过配合使用组件与自定义元素(Custom element),你能够方便地将应用分解为可重用的小部件(widget)、区域(section)或页面。
组件能够将一个视图模型(View model)与一个模板组合为一个封装包,这方面的例子可以是一个导航栏或者是进度面板。你可以使用“组件绑定”将这些组件与普通的div 元素绑定在一起,不过还有一种更为强大的用法存在:你可以在应用中使用自定义元素。
举个例子来说明一下,你可以按照如下方式定义一个组件(需要注意的是,在真实的项目中,你应该将视图与视图模型分别定义在不同的文件中):
ko.components.register('like-widget', { viewModel: function(params) { // Data: value is either null, 'like', or 'dislike' this.chosenValue = params.value; // Behaviors this.like = function() { this.chosenValue('like'); }.bind(this); this.dislike = function() { this.chosenValue('dislike'); }.bind(this); }, 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>'
随后,你可以在视图中配合定义了“products”这个属性的视图模型使用这个组件:
<ul data-bind="foreach:products"> <li class="product"> <strong data-bind="text: name"></strong> <like-widget params="value: userRating"></like-widget> </li> </ul>
这种方式的优势在于,这个 like-widget 可以在多个地方进行重用,并且相关的所有逻辑也进行了独立的封装。将应用程序进行分解多个组件,可以大大简化代码的创建、理解与维护难度。
这种方式与 AngularJS 的理念非常相似,后者也是通过自定义组件的方式对 html 元素进行功能扩展。此外,这种方式也类似于 WebComponents标准中关于自定义元素的这一节内容,该标准现在还在不断改进中。总的来说,开发者们对于这个新特性的出现感到十分兴奋。
此次更新还带来了其它一些改进:
- ko.pureComputed - 这是 ko.computed 的一种变体形式,它提供了更好的性能与内存管理方式。这一特性只对推断式可观察对象(computed observable)有效,这种对象在推断结果时不会造成任何副作用,而且它的结果完全是由应用中其它可观察对象的值产生的。换句话说,这一特性要求这种推断式可观察对象的值不能够受到任何来自于整个依赖跟踪体系结构之外的隐藏值或是状态值的影响。
- 新的“textInput”绑定,它能够将元素或
评论