Knockoutjs：Component and Custom Elements（翻译文章）

Knockoutjs 的Components 是一种自定义的组件，它以一种强大、简介的方式将你本身的ui代码组织成一种单独的、可重用的模块，自定义的组件（Component）有如下特色：

1.能够替代单独的widgit或者控制逻辑，或者你本身application的整个模块；

2.包含本身的view，一般也包含了本身的viewModel（这个viewModel也能够不进行定义）

3.能够预加载，能够经过AMD或者其余模块系统的方式根据须要异步加载

4.能够接收参数，根据须要选择性的对这些参数进行修改并返回，或者调用回调函数

5.组件能够进行组合，或者从别的组件进行继承

6.可以进行打包，跨项目复用

7.容许你定义本身的逻辑来进行js文件的配置和加载

这种模式对大型应用来说是很是有利的，由于这种自定义组件的模式，经过清晰的组织和封装简化了开发复杂度，经过根据须要增量式的加载你本身的应用代码和模板大大提升了运行时的性能。

 

自定义元素：是一种使用自定义组件的很是便利的方式。你没必要必定要用一对<div data-bind=""></div>套在你须要绑定的标签的外层来进行数据的绑定，而是用你本身描述的标记语言，好比<voting-button><product-editor>，这种形式，标签里的是你自定义的元素名称。Knockout在这一点上也兼容老版本的浏览器，IE6兼容。

 

例子一：一个 like/dislike的小插件

首先，你须要用来ko.components.register注册一个component。一个组件的定义须要有一个viewModel和一个template：

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>'
});

一般状况下，你须要引入外部文件来加载viewModel和模板，而不是像上面这样写到同一个文件里。稍后咱们讲解怎么以引入外部文件的方式加载viewModel和template。

如今，经过进行组件绑定（component binding）或者自定义元素的方式在你的view（一般是html文档）里使用上面的自定义组件了。

viewCode：

<ul data-bind="foreach: products">
    <li class="product">
        <strong data-bind="text: name"></strong>
        <like-widget params="value: userRating"></like-widget>
    </li>
</ul>

 

viewModelCode：

function Product(name, rating) {
    this.name = name;
    this.userRating = ko.observable(rating || null);
}

function MyViewModel() {
    this.products = [
        new Product('Garlic bread'),
        new Product('Pain au chocolat'),
        new Product('Seagull spaghetti', 'like') // This one was already 'liked'
    ];
}

ko.applyBindings(new MyViewModel());

在这个例子里面，组件经过Product的viewModel中的可监控属性：userRating来进行显示、编辑。

 

例子二：从外部文件加载like/dislike组件

在大多数的应用中，通常都会将组件的viewModel和模板放在外部文件中，若是你使用require.js这样的模块加载器来配置加载knockout来获取外部ADM模块的话，那么就能够经过bundle/minified的方式来进行预加载，或者按需增量加载。

下面是一个使用require.js的配置示例：

ko.components.register('like-or-dislike', {
    viewModel: { require: 'files/component-like-widget' },
    template: { require: 'text!files/component-like-widget.html' }
});

须要的文件：

为了实现改组件（component）的功能，须要文件 files/component-like-widget.js 和 files/component-like-widget.html 。你是否是发现，这比直接在组件的定义里面包含viewModel和template要整洁、方便不少。
files/component-like-widget.js code：

define(['knockout'], function(ko) {

    function LikeWidgetViewModel(params) {
        this.chosenValue = params.value;
    }

    LikeWidgetViewModel.prototype.like = function() {
        this.chosenValue('like');
    };

    LikeWidgetViewModel.prototype.dislike = function() {
        this.chosenValue('dislike');
    };

    return LikeWidgetViewModel;

});

files/component-like-widget.html code：

 

<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.
    And this was loaded from an external file.
</div>

 

 

如今like-or-dislike插件能够像上面的例子同样使用，使用component binding的方式，或者自定义元素的方式。

下面是源码：

view ：

 

<ul data-bind="foreach: products">
    <li class="product">
        <strong data-bind="text: name"></strong>
        <like-or-dislike params="value: userRating"></like-or-dislike>
    </li>
</ul>
<button data-bind="click: addProduct">Add a product</button>

viewModel：

 

function Product(name, rating) {
    this.name = name;
    this.userRating = ko.observable(rating || null);
}

function MyViewModel() {
    this.products = ko.observableArray(); // Start empty
}

MyViewModel.prototype.addProduct = function() {
    var name = 'Product ' + (this.products().length + 1);
    this.products.push(new Product(name));
};

ko.applyBindings(new MyViewModel());

在你第一次点击“Add product” 按钮以前，打开浏览器的开发工具Network，你会发现组件的.js/.html文件第一次是按需加载的，加载以后就一直存在以备下次复用。

 

 

Knockoutjs源出处：http://knockoutjs.com/documentation/component-overview.html