Knockout 组件能够帮助你更好地安排应用的代码结构

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”绑定，它能够将元素或元素与一个视图模型的属性进行双向绑定。这种绑定提供了比传统的“value”绑定更强大的功能，因为它能够处理各种用户输入方式，例如自动完成（auto complete）、拖放，以及剪贴板事件等等。</li> <li> 对于复选框与单选框控件，现在使用“value”绑定将能够获得与使用“checkedValue”绑定相同的行为了。这是由于许多人会在应该使用“checkedValue”绑定时错误地使用了“value”绑定，因此这一改动能够保证在你犯错时依然提供了你所期望的行为。而“checkedValue”这一绑定依然可以继续使用。</li> </ul> <p> 此外还有一些缺陷修复：你可以阅读一下新版本的 <a href="https://github.com/knockout/knockout/releases/tag/v3.2.0"> 发布说明 </a>，以获得完整的变更列表。</p> <p><a href="http://knockoutjs.com/index.html">Knockout</a> 是一个 JavaScript MVVM 类库，它的功能主要体现在声明式的绑定、在 DOM 与视图模型之间的双向更新、视图模板以及依赖跟踪基础结构。</p> <p><strong> 查看英文原文：</strong><a href="http://www.infoq.com/news/2014/08/knockout-components">Knockout Components to Structure Your Apps Better</a></p>