Knockoutjs-关于components
浏览数：21 /
时间：2015年06月09日
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，异步加载
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
