Knockoutjs-关于components

 

 

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，异步加载

 

转载于:https://www.cnblogs.com/mansu/p/4444934.html