HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

KnockoutJS - 组件

组件是组织 UI 代码的重要方式，用于构建大型应用程序并促进代码可重用性。

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

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

组件注册

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

语法

组件可以按如下方式注册 −

ko.components.register('component-name', {
    viewModel: {...}, //功能代码
    template: {....) //功能代码
});

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

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

  • template 是必需的，可以采用下一节中列出的任何模板格式。

声明 ViewModel

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

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

document fragement

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

AMD 模块

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

组件注册为单个 AMD 模块

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

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

组件绑定

组件绑定有两种方式。

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

    • name − 它添加组件名称。

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

<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>

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

<div data-bind = 'component: "component name"'></div>

  • 仅模板组件 − 组件只能定义模板而不指定 viewModel。

ko.components.register('component name', {
   template:'<input data-bind = "value: someName" />,
});

  • 使用没有容器元素的组件 − 无需使用额外的容器元素即可使用组件。这可以使用与注释标签类似的无容器流控件来实现。

<!--ko.component: ""-->
<!--/ko-->

自定义元素

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

<products-list params = "name: userName, type: userType"></products-list>

传递参数

params 属性用于将参数传递给组件 viewModel。它类似于 data-bind 属性。params 属性的内容被解释为 JavaScript 对象文字(就像 data-bind 属性一样)，因此您可以传递任何类型的任意值。它可以通过以下方式传递参数 −

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

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

    • simpleExpression − 它是一个数值。它不涉及任何可观察对象。

    • simpleObservable − 它是在父视图模型上定义的实例。父视图模型将自动获取子视图模型对可观察对象所做的更改。

    • observableExpression −当表达式被自身求值时，表达式会读取可观察值。当可观察值发生变化时，表达式的结果也会随时间而变化。

我们可以按如下方式传递参数 −

<some-component
   params = 'simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1'>
</some-component>

We can pass the parameters in viewModel as follows −

<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.register 在组件中注册的名称，相同的名称对应于自定义元素标签名称。我们可以通过使用 getComponentNameForNode 覆盖它来更改自定义元素标签名称。

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

注册自定义元素

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

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>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

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

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

组件加载器

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

默认组件加载器

默认组件加载器依赖于明确注册的配置。每个组件在使用之前都会进行注册。

ko.components.defaultLoader

组件加载器实用函数

默认组件加载器可以使用以下函数进行读写。

Sr.No. 实用函数 &描述
1

ko.components.register(name, configuration)

组件已注册。
2

ko.components.isRegistered(name)

如果特定组件名称已注册，则返回 true，否则返回 false。
3

ko.components.unregister(name)

组件名称已从注册表中删除。
4

ko.components.get(name,callback)

此函数依次查找每个已注册的加载器，以查找谁首先传递了组件名称的 viewModel/template 定义。然后它通过调用 callback 返回 viewModel/template 声明。如果已注册的加载器找不到有关该组件的任何信息，则它会调用 callback(null)。
5

ko.components.clearCachedDefinition(name)

当我们想要清除给定的组件缓存条目时，可以调用此函数。如果下次需要该组件，将再次查阅加载器。

实现自定义组件加载器

自定义组件加载器可以通过以下方式实现 −

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

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

    • template − 必需。返回DOM节点数组。

    • createViewModel(params, componentInfo) − 可选。根据viewModel属性的配置方式返回viewModel对象。

  • loadTemplate(name, templateConfig, callback) − 使用自定义逻辑在模板中传递DOM节点。对象templateConfig是来自对象componentConfig的模板的属性。调用callback(domNodeArray)来传递DOM节点数组。

  • loadViewModel(name, templateConfig, callback) − 使用自定义逻辑在viewModel配置中传递viewModel工厂。

❮ 上一节 下一节 ❯