📌  相关文章
📜  KnockoutJS-组件

📅  最后修改于: 2020-10-23 07:39:56             🧑  作者: Mango

组件是组织UI代码以构造大型应用程序并提高代码可重用性的一种巨大方式。

它是从其他组件继承或嵌套的。对于加载和配置，它定义了自己的约定或逻辑。

它被打包以在整个应用程序或项目中重复使用。表示应用程序或小型控件/小部件的完整部分。可以按需加载或预加载。

组件注册

组件可以使用ko.components.register（） API进行注册。它有助于加载和表示KO中的组件。带有配置的组件名称需要注册。该配置指定如何确定viewModel和模板。

句法

组件可以注册如下-

ko.components.register('component-name', {
   viewModel: {...},    //function code
   template: {....)    //function code
});

  • component-name可以是任何非空字符串。

  • viewModel是可选的，并且可以采用下一部分中列出的任何viewModel格式。

  • 模板是必需的，并且可以采用下一部分中列出的任何模板格式。

声明一个ViewModel

下表列出了可用于注册组件的viewModel格式。

Sr.No. viewModel Forms & Description
1

constructor function

It creates a separate viewModel object for each component. The object or function is used to bind in components view.

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register('component name', {
   viewModel: SomeComponentViewModel,
   template: ...
});
2

shared object instance

The viewModel object instance is shared. The instance property is passed to use the object directly.

var sharedViewModelInstance = { ... };

ko.components.register('component name', {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});
3

createViewModel

It calls a function which acts as a factory and can be used as view model that can return an object.

ko.components.register('component name', {  
   viewModel: {  
      createViewModel: function (params, componentInfo) {  
         ...       //function code  
         ...
      }  
   },  
   template: ....  
});
4

AMD module

It is a module format for defining modules where module and dependencies both are loaded asynchronously.

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

define(['knockout'], function(ko) {
   function MyViewModel() {
      // ...
   }

   return MyViewModel;
});

陈述模板

下表列出了可用于注册组件的模板格式。

Sr.No. Template Forms
1

element ID

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

element instance

var elemInstance = document.getElementById('component-template');

ko.components.register('component name', {
   template: { element: elemInstance },
   viewModel: ...
});
3

string of markup

ko.components.register('component name', {
   template: '\
      ',
   viewModel: ...
});
4

DOM nodes

var emp = [
   document.getElementById('node 1'),
   document.getElementById('node 2'),
];

ko.components.register('component name', {
   template: emp,
   viewModel: ...
});
5

document fragement

ko.components.register('component name', {
   template: someDocumentFragmentInstance,
   viewModel: ...
});
6

AMD module

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

注册为单个AMD模块的组件

AMD模块可以自行注册组件，而无需使用viewModel / template对。

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

组件绑定

组件绑定有两种方法。

  • 完整语法-将参数和对象传递给组件。可以使用以下属性通过。

    • 名字-它增加了组件的名字。

    • params-它可以在组件上的对象中传递多个参数。

  • 简写语法-它将字符串作为组件名称传递，并且不包含参数。

  • 仅模板组件-组件只能在不指定viewModel的情况下定义模板。

ko.components.register('component name', {
   template:',
});

  • 在没有容器元素的情况下使用组件-可以在不使用额外容器元素的情况下使用组件。可以使用类似于注释标签的无容器流量控制来完成。

自订元素

自定义元素是呈现组件的一种方式。在这里，您可以直接编写一个自我描述性的标记元素名称，而不必定义一个占位符，组件通过该占位符进行绑定。

传递参数

params属性用于将参数传递给组件viewModel。它类似于数据绑定属性。 params属性的内容像JavaScript对象字面量一样被解释（就像数据绑定属性一样），因此您可以传递任何类型的任意值。它可以通过以下方式传递参数-

  • 父组件和子组件之间的通信-组件本身未实例化，因此viewmodel属性是从组件外部引用的，因此将由子组件viewmodel接收。例如，您可以在以下语法中看到ModelValue是父viewmodel，由子viewModel构造函数ModelProperty接收。

  • 传递可观察到的表达式-它在params参数中具有三个值。

    • simpleExpression-它是一个数值。它不涉及任何可观察的事物。

    • simpleObservable-这是在父viewModel上定义的实例。父viewModel将自动获得子viewModel进行的observable更改。

    • observableExpression-当表达式本身被评估时，表达式读取可观察的。当可观察值发生变化时，表达式的结果也会随时间变化。

我们可以如下传递参数-

我们可以在viewModel中传递参数，如下所示：

将标记传递到组件中

接收到的标记用于创建组件，并被选择作为输出的一部分。以下节点作为组件模板中输出的一部分传递。

template: { nodes: $componentTemplateNodes }

控制自定义元素标签名称

您使用ko.components.register在组件中注册的名称，该名称对应于自定义元素标记名称。我们可以通过使用getComponentNameForNode覆盖自定义元素标签名称进行控制来更改其名称。

ko.components.getComponentNameForNode = function(node) {
   ...
   ...   //function code
   ...
}

注册自定义元素

如果使用了默认的组件加载器，那么定制元素可以立即可用，因此可以使用ko.components.register注册组件。如果我们没有使用ko.components.register并实现自定义组件加载器，则可以通过定义任何选择的元素名称来使用自定义元素。使用ko.components.register时无需指定配置，因为自定义组件加载器不再使用它。

ko.components.register('custom-element', { ......... });

例

现场演示
KnockoutJS Components

输出

让我们执行以下步骤，看看上面的代码如何工作-

  • 将以上代码保存在component_register.htm文件中。

  • 在浏览器中打开此HTML文件。

零件装载机

组件加载器用于为给定的组件名称异步传递template / viewModel对。

默认的组件加载器

默认组件加载程序取决于显式注册的配置。每个组件在使用之前都已注册。

ko.components.defaultLoader

组件加载程序实用程序功能

默认的组件加载程序可以使用以下功能进行读写。

Sr.No. Utility functions & Description
1

ko.components.register(name, configuration)

Component is registered.
2

ko.components.isRegistered(name)

If the particular component name is already registered, then it returns as true else false.
3

ko.components.unregister(name)

The component name is removed from the registry.
4

ko.components.get(name, callback)

This function goes turn by turn to each registered loader to find who has passed the viewModel/template definition for component name as first. Then it returns viewModel/template declaration by invoking callback. If the registered loader could not find anything about the component, then it invokes callback(null).
5

ko.components.clearCachedDefinition(name)

This function can be called when we want to clear the given component cache entry. If the component is needed next time, again the loaders will be consulted.

实施自定义组件加载器

定制组件加载器可以通过以下方式实现-

  • getConfig（name，callback） -根据名称，我们可以以编程方式传递配置。我们可以调用callback（componentConfig）来传递配置，其中对象componentConfig可以由loadComponent或任何其他加载器使用。

  • loadComponent（name，componentConfig，callback） -此函数根据配置的方式解析viewModel和config的模板部分。我们可以调用callback（result）来传递viewmodel / template对，其中对象结果由以下属性定义。

    • 模板-必填。返回DOM节点数组。

    • createViewModel（params，componentInfo） -可选。根据viewModel属性的配置方式返回viewModel对象。

  • loadTemplate（name，templateConfig，callback） -使用自定义逻辑在模板中传递DOM节点。对象templateConfig是来自对象componentConfig的模板的属性。调用callback（domNodeArray）以传递DOM节点数组。

  • loadViewModel（name，templateConfig，callback） -使用自定义逻辑在viewModel配置中传递viewModel工厂。