components可以作为widgets来呈现，它包含了自己独立的view，能够被预加载或者通过异步的方式加载，能够接受参数并返回结果，可继承于其他组件，也可被重用。
通过使用components，我们可以使用自定义的语义化标签来代替<div>，这种方式在旧的浏览器下同样可以实现兼容。
一个组件中包含了viewmodel和template，所以在使用的时候需要像这样的方式来注册组件：
1 ko.components.register( 'component-name' , {
2 viewModel : something… ,
3 template : something…
4 });
其中，组件名称使用小写的单词，并以短线连接的形式，这样就可应被当作元素来使用；
viewModel是可选的，如果没有的话，这个组件也就等同于一段HTML代码；
template是必不可少的。
- viewmodel的构建可以有多种方式
1 构造函数的方式
在此方式下，会为每个组件分别创建实例，也就是每个都有单独的viewmodel对象。
2 共享对象实例的方式
如果想要使多个组件共享同一个viewmodel的实例，可以使用如下的方式：
1 var shareViewModelInstance = {...};
2 ko.components.register( 'my-component' , {
3 viewModel : { instance : shareViewModelInstance },
4 template : ...
5 });
3 工厂函数模式
在绑定到viewmodel之前，对所关联的元素进行某些操作
1 ko.components.register(' my-component' , {
2 viewModel: {
3 createViewModel: function(params, componentInfo){
4 return new MyViewModel( params );
5 }
6 },
7 template: ...
8 });
4 文件加载模式
类似使用require.js 文件
1 ko.components.register(
2 viewModel: { require: 'some/module/name' },
3 template: ...
4 )
在加载进来的文件中可以使用以上任意的模式
格式：
1 define( ['knockout'], function(ko){
2 function MyViewModel(){
3 ...
4 }
5 return MyViewModel;
6 // return { instance: new MyViewModel()};
7 //...
8 });
- template的构建方式
1 使用ID来调用模板
1 <template id='component-template'> 2 <h1>...</h1> 3 </template>
1 ko.components.register('my-component',{
2 template: {element: 'component-template'},
3 viewModel: ...
4 });
其中<template>元素会被浏览器忽略，<template>内部的元素才会被当作是模板的一部分。
2 使用
var elementInstance = document.getElementById('component-template') 获取template
3 使用标签组成的字符串
template : '<h1 data-bind="text: title"></h1>'
4 使用DOM节点的数组创建
5 外部引入文件
template:{ require: '/some/template'}
template:{ require: 'text!path/file.html'}
- 设定component的同步或异步加载方式
synchronous: true
默认为false，异步加载