ko.components.register('component-name', { viewModel: {...}, //function code template: {....) //function code });
| Sr.No. | viewModel 表单和描述 |
| 1 |
构造函数
它为每个组件创建一个单独的viewModel对象。对象或函数用于在组件视图中绑定。
function SomeComponentViewModel(params) {
this.someProperty = params.something;
}
ko.components.register('component name', {
viewModel: SomeComponentViewModel,
template: ...
});
|
| 2 |
共享对象实例
viewModel 对象实例是共享的。传递实例属性直接使用对象。
var sharedViewModelInstance = { ... }; ko.components.register('component name', { viewModel: { instance: sharedViewModelInstance }, template: ... }); |
| 3 |
createViewModel
它调用了一个作为工厂的函数，可以用作可以返回对象的视图模型。
ko.components.register('component name', { viewModel: { createViewModel: function (params, componentInfo) { ... //function code ... } }, template: .... }); |
| 4 |
AMD 模块
它是一种模块格式，用于定义模块和依赖项都异步加载的模块。
ko.components.register('component name', { viewModel: { require: 'some/module/name' }, template: ... }); define(['knockout'], function(ko) { function MyViewModel() { // ... } return MyViewModel; }); |
| Sr.No. | 模板表单 |
| 1 |
元素 ID
ko.components.register('component name', { template: { element: 'component-template' }, viewModel: ... }); |
| 2 |
元素实例
var elemInstance = document.getElementById('component-template'); ko.components.register('component name', { template: { element: elemInstance }, viewModel: ... }); |
| 3 |
标记字符串
ko.components.register('component name', { template: '<input data-bind = "value: yourName" />\ <button data-bind = "click: addEmp">Add Emp </button>', viewModel: ... }); |
| 4 |
DOM 节点
var emp = [ document.getElementById('node 1'), document.getElementById('node 2'), ]; ko.components.register('component name', { template: emp, viewModel: ... }); |
| 5 |
文件碎片
ko.components.register('component name', { template: someDocumentFragmentInstance, viewModel: ... }); |
| 6 |
AMD 模块
ko.components.register('component name', { template: { require: 'some/template' }, viewModel: ... }); |
ko.components.register('component name',{ require: 'some/module'});
<div data-bind='component: {
name: "tutorials point",
params: { mode: "detailed-list", items: productsList }
}'>
</div>
<div data-bind = 'component: "component name"'></div>
ko.components.register('component name', { template:'<input data-bind = "value: someName" />, });
<!--ko.component: ""-->
<!--/ko-->
<products-list params = "name: userName, type: userType"></products-list>
<some-component
params = 'simpleExpression: 1 + 1,
simpleObservable: myObservable,
observableExpression: myObservable() + 1'>
</some-component>
<some-component
params = 'objectValue:{a: 3, b: 2},
dateValue: new date(),
stringValue: "Hi",
numericValue:123,
boolValue: true/false,
ModelProperty: ModelValue'>
</some-component>
template: { nodes: $componentTemplateNodes }
ko.components.getComponentNameForNode = function(node) { ... ... //function code ... }
ko.components.register('custom-element', { ......... });
<!DOCTYPE html>
<head>
<title>KnockoutJS Components</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
</head>
<body>
<!--params attribute is used to pass the parameter to component viewModel.-->
<click params = "a: a, b: b"></click>
<!--template is used for a component by specifying its ID-->
<template id = "click-l">
<div data-bind = "text: a"></div>
<!--Use data-bind attribute to bind click:function() to ViewModel.-->
<button data-bind = "click:function(){callback(1)}">Increase</button>
<button data-bind = "click:function(){callback(-1)}">Decrease</button>
</template>
<script>
//Here components are registered
ko.components.register('click', {
viewModel: function(params) {
self = this;
this.a = params.a;
this.b = params.b;
this.callback = function(num) {
self.b(parseInt(num));
self.a( self.a() + parseInt(num) );
};
},
template: { element: 'click-l' }
});
//keeps an eye on variable for any modification in data
function viewModel() {
this.a = ko.observable(2);
this.b = ko.observable(0);
}
ko.applyBindings(new viewModel() );
</script>
</body>
</html>
ko.components.defaultLoader
| Sr.No. | 实用功能和说明 |
| 1 |
ko.components.register(name, configuration)
组件已注册。
|
| 2 |
ko.components.isRegistered(name)
如果特定的组件名称已经注册，则返回真，否则返回假。
|
| 3 |
ko.components.unregister(name)
组件名称从注册表中删除。
|
| 4 |
ko.components.get(name, callback)
这个函数会轮流到每个注册的loader去寻找谁通过了viewModel/template定义对于组件名称作为第一个。然后它通过调用
callback 返回 viewModel/template 声明。如果注册的加载器找不到有关组件的任何信息，则它会调用
callback(null)。
|
| 5 |
ko.components.clearCachedDefinition(name)
当我们想清除给定的组件缓存条目时可以调用这个函数。如果下次需要该组件，将再次咨询加载程序。
|
