你的位置:首页 > Java教程

[Java教程]KnockoutJS 3.X API 第六章 组件 组件和自定义元素


Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块。 :

  • …可以表示单独的控件/窗口小部件或应用程序的整个部分
  • …包含自己的视图,通常(但可选)自己的视图模型
  • …可以预加载或通过AMD或其他模块系统异步加载(按需)
  • …可以接收参数,并可选地将更改写回到它们或调用回调
  • …可以一起组成(嵌套)或继承自其他组件
  • …可以轻松地打包,以便跨项目进行重用
  • …让您定义自己的约定/逻辑进行配置和加载

此模式有利于大型应用程序,因为它通过明确的组织和封装简化了开发,并通过根据需要增量式加载应用程序代码和模板来帮助提高运行时性能。

自定义元素是用于消费组件的可选但方便的语法。 不需要使用绑定注入组件的占位符<div>,您可以使用具有自定义元素名称的更多自描述标记(例如,<voting-button>或<product-editor>)。 Knockout小心确保兼容性,即使与旧的浏览器,如IE 6。

示例1:喜欢/不喜欢小部件

可以使用ko.components.register注册组件(技术上,注册是可选的,但它是最简单的入门方式)。 组件定义指定一个viewModel和模板。 例如:

ko.components.register('like-widget', {  viewModel: function(params) {    // Data: value is either null, 'like', or 'dislike'    this.chosenValue = params.value;         // Behaviors    this.like = function() { this.chosenValue('like'); }.bind(this);    this.dislike = function() { this.chosenValue('dislike'); }.bind(this);  },  template:    '<div data-bind="visible: !chosenValue()">\      <button data-bind="click: like">Like it</button>\      <button data-bind="click: dislike">Dislike it</button>\    </div>\    <div data-bind="visible: chosenValue">\      You <strong data-bind="text: chosenValue"></strong> it\    </div>'});

通常,您将从外部文件加载视图模型和模板,而不是像这样声明它们。

现在,要使用此组件,您可以从应用程序中的任何其他视图引用它,可以使用组件绑定或使用自定义元素。 下面是一个使用它作为自定义元素的实例: