组件和自定义元素 -- 概览

[wikieswan]

组件和自定义元素 -- 概览

组件 是一种强大、简单的方式来把你的UI代码封装到一个封闭的、独立的代码块中。

组件的特性：

• 代表个性化的控制器/小部件，或者是你应用的整体
• 包含自己的视图，通常有自己的视图模型
• 即可以预加载，也可以以AMD或者其他模块系统实现异步加载
• 可以接受参数，把变化都传递给参数，还可以调用回调函数
• 可以组合起来（可以嵌套组合）或者继承其他组件
• 容易打包，项目间可重用
• 让用户可以为配置和加载自定义逻辑代码

这种模式适用于大型应用。因为它通过简单的组织和封装简化了开发，通过逐步按需加载应用的代码和模板来提升网页的实时性表现性能。

自定义元素 在自定义组件中，是一个非必须的但是很方便的语法。就不用仅限于用 div 作为标签了，你可以自定义标签名 例如 <voting-button> 或者 <product-editor>等。 KO会保证自定义标签的兼容性，即使在IE6下！对，就是IE6，任性吧。

例1 一个点赞控件

首先，先用 ko.components.register 注册一个组件（技术上，注册是可选的方式，但是它是一个最简单的方式）。组件定义了一个特殊的 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>'
});

通常，从外部文件中加载视图模型和模板，而不是在像这样在代码中声明他们。稍后讲下原因。

现在，在应用中你可以从其他任何视图中引用这个组件，可以用组件绑定或者使用自定义元素的方式.下面有如何引用组件的例子：

视图层代码

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

视图模型代码

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 的属性 userRating 。

例2 按照需要，从外部文件中加载点赞组件

在大部分应用中，组件都是以外部文件的形式存储的。如果你项目中用了AMD加载库比如 require，就可以按需加载或者预加载KO的组件。

看下面这个例子：

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 。可以点击链接查看代码--你会看到，这样比在文件内定义组件更方便和简洁了。

还有，你需要你需要 require 这样的库来引入你的组件文件。

使用组件

like-or-dislike 可以和以前一样的方式使用了。

视图层代码

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

视图模型代码

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());

以上！！