Knockout.js组件系统的详解之（一） - 组件的定义和注册

（Knockout版本：3.4.1 ）

KO的组件主要从以下四个部分进行详细介绍：

1.组件的定义和注册

2.组件绑定

3.使用自定义元素

4.自定义组件加载器(高级)

目录结构

1.通过"视图模型"、"模版"配对注册组件

--1.1 指定视图模型的方法

----1.1.1 构造函数

----1.1.2 对象实例

----1.1.3 创造视图模型的工厂函数

----1.1.4 AMD模块，其值描述了一个视图模型

--1.2 指定模版的方法

----1.2.1 已存在元素的ID

----1.2.2 已存在元素的实例

----1.2.3 HTML字符串

----1.2.4 包含许多DOM节点的数组

----1.2.5 文档片段

----1.2.6 AMD模块，其值描述了一个模版

2.Knockout怎样通过AMD加载组件

--2.1 AMD模块为按需加载

3.通过一个AMD模块注册组件

--3.1 推荐的AMD组件模块的定义方式

1.1.1 构造函数

function SomeComponentViewModel(params) {
  // 'params' is an object whose key/value pairs are the parameters
  // passed from the component binding or custom element.
  this.someProperty = params.something;
}

SomeComponentViewModel.prototype.doSomething = function() { ... };

ko.components.register('my-component', {
  viewModel: SomeComponentViewModel,
  template: ...
});

Knockout将会调用这个构造函数并生成一个实例作为视图模型，其中params参数在组件调用的时候传入。

1.1.2 对象实例

直接传递一个对象实例作为视图模型，所有使用这个对象的组件共享这一个实例。假定对象实例为modelInstance，注意传入方法为：viewModel: {instance: modelInstance}

1.1.3 创造视图模型的工厂函数

如果创建这个视图模型需要取得一些组件调用的信息，那么就采取这从模式定义视图模型。

ko.components.register('my-component', {
  viewModel: {
    createViewModel: function(params, componentInfo) {
      // - 'params'是组件调用时传入的对象
      // - 'componentInfo.element'是组件注入的元素，当createViewModel方
      // 法被调用时，组件已被注入到元素中，但还没有发生绑定。
      // - 'componentInfo.templateNodes'是一个包含了组件调用时内部的DOM节
      // 点的数组。

      // 通过自己定义的构造函数返回一个实例
      return new MyViewModel(params);
    }
  },
  template: ...
});

注意，操作DOM最好只通过自定义绑定，而不要通过componentInfo.element进行一些操作DOM的行为。

componentInfo.templateNodes在我们需要控制组件输出的节点时会起到作用。

1.1.4 通过AMD模块

如果使用了AMD模块加载器，比如(require.js)，可以使用模块加载器直接加载AMD模块作为视图模型。

ko.components.register('my-component', {
  viewModel: { require: 'some/module/name' },
  template: ...
});

加载的AMD模块只要按照1.1.1，1.1.2，1.1.3三种方式中的一种提供模块(即returns)就可以了。另外还有一种一般不会用到的方式AMD模块的return为 return { module: 'some/other/module' }，这种方式将会加载其它模块。

1.2.1 已存在元素的ID

<template id='my-component-template'>
  <h1 data-bind='text: title'></h1>
  <button data-bind='click: doSomething'>Click me right now</button>
</template>

ko.components.register('my-component', {
  template: { element: 'my-component-template' },
  viewModel: ...
});

指定一个已存在元素的ID即可，ID所对应元素本身不会被作为模版的元素传入，其内部节点会作为模版被传入。推荐使用例子里的< template>标签，别的标签也可以，但浏览器不识别template标签所以它不会被渲染收到影响，另外语义也比较清晰。

1.2.2 已存在元素的实例

类似于传入ID，只是这次传入的是元素实例。

1.2.3 HTML字符串

ko.components.register('my-component', {
  template: '<h1 data-bind="text: title"></h1>\
          <button data-bind="click: doSomething">Clickety</button>',
  viewModel: ...
});

当我们从别处取得一些字符串来生成模版时(比如AMD)，这个方法很有用。

1.2.4 包含许多DOM节点的数组

var myNodes = [
  document.getElementById('first-node'),
  document.getElementById('second-node'),
  document.getElementById('third-node')
];

ko.components.register('my-component', {
  template: myNodes,
  viewModel: ...
});

这些节点会依次作为组件模版被复制渲染出来。

1.2.5 文档片段

也可以直接传入一个文档片段作为模版。文档片段的例子

1.2.6 AMD模块

可以传一个AMD模块，这个模块的返回值是以上模版的任一种类型都可以。

2.Knockout怎样通过AMD加载组件

当为视图模型和模版传入require声明时：

ko.components.register('my-component', {
  viewModel: { require: 'some/module/name' },
  template: { require: 'text!some-template.html' }
});

这些AMD模块被加载，实际上类似于使用了require(['some/module/name'], callback)和require(['text!some-template.html'], callback)。KO加载这些模块有三个需要注意的点：

*KO并不严格要求使用require.js，任何其它的AMD模块加载器都可以使用。

*KO并不影响加载模块的路径，路径仍然完全由所用的AMD加载器决定。

*KO并不关心所加载的模块是否是暴露了全局变量名称的模块。

2.1 AMD模块为按需加载

比如一个组件写在了一个绑定了if指令的标签中，那只有if对应的值真，组件模块才加载，否则不加载。如果组件模块已经加载过了， 那么将不再发送HTTP请求来请求模块，而是预加载之前存下来的模块。

3.1 推荐的AMD组件模块的定义方式

只要AMD模块返回的是以上任意一种合法的模块配置就可以作为一个有效的组件模块，但是有一种推荐的组件模块定义方法：

// - 使用这种模式定义模块的优点在于
// - 引入只需要一个require声明
// - 可以被require.js的r.js打包
define(['knockout', 'text!./my-component.html'], function(ko, htmlString) {
  function MyComponentViewModel(params) {
    // 在这里设置属性等
  }

  // 使用原型定义公共方法
  MyComponentViewModel.prototype.doSomething = function() { ... };

  // 返回组件的定义
  return { viewModel: MyComponentViewModel, template: htmlString };
});

这样定义的组件模块，调用方法为：ko.components.register('my-component', { require: 'path/my-component' });。一个组件模块由两个文件组成，一个视图模型(path/my-component.js)和一个模版(path/my-component.html)，创建自然，维护方便。