你的位置:首页 > Java教程

[Java教程]KnockoutJS 3.X API 第六章 组件 组件绑定

组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它。

本节目录

  • 一个例子
  • API
  • 组件生命周期
  • 备注1:仅限模板组件
  • 备注2:使用没有容器元素的组件
  • 备注3:将标记传递给组件
  • 处置和内存管理

一个例子

First instance, without parameters


Second instance, passing parameters

UI源码:

<h4>First instance, without parameters</h4><div data-bind='component: "message-editor"'></div> <h4>Second instance, passing parameters</h4><div data-bind='component: {  name: "message-editor",  params: { initialText: "Hello, world!" }}'>
</div>

视图模型源码:

ko.components.register('message-editor', {  viewModel: function(params) {    this.text = ko.observable(params && params.initialText || '');  },  template: 'Message: <input data-bind="value: text" /> '      + '(length: <span data-bind="text: text().length"></span>)'}); ko.applyBindings();

注意:在更现实的情况下,通常从外部文件加载组件视图模型和模板,而不是将它们硬编码到注册中。

API

有两种方法使用组件绑定:

快速语法:

如果你只传递一个字符串,它被解释为一个组件名称。 然后注入命名的组件,而不向其提供任何参数。 例:

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

也可以将监控属性作为组件名称。 在这种情况下,如果监控属性值更改,组件绑定将处理旧组件实例,并注入新引用的组件。 例:

<div data-bind='component: observableWhoseValueIsAComponentName'></div>

完整语法:

要向组件提供参数,请传递具有以下属性的对象:

  • name — 要注入的组件的名称。 同样,这可以是监控属性。
  • params —将被传递给组件的对象。 通常,这是一个包含多个参数的键值对象,通常由组件的viewmodel构造函数接收。

例如:

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

组件生命周期

当组件绑定注入组件时,

  1. 请求您的组件加载器提供viewmodel工厂和模板

    • 可以查阅多个组件加载器,直到第一个识别组件名称并提供视图模型/模板。 此过程仅对每个组件类型发生一次,因为Knockout在内存中缓存生成的定义。
    • 默认组件加载器根据您注册的内容提供viewmodels /template。 如果适用,这是从AMD加载器请求任何指定的AMD模块的阶段。

    通常,这是一个异步过程。 它可能涉及对服务器的请求。 对于API一致性,Knockout默认确保加载过程作为异步回调完成,即使组件已经加载并缓存在内存中。 有关更多信息以及如何允许同步加载,请参阅上一节的控制同步/异步加载。

  2. 组件模板被克隆并注入到容器元素中

    任何现有内容都将被删除并丢弃。

  3. 如果组件有一个viewmodel,它被实例化

    如果viewmodel是作为构造函数给出的,这意味着Knockout调用新的YourViewModel(params)。

    如果viewmodel作为createViewModel工厂函数给出,Knockout callscreateViewModel(params,componentInfo),其中componentInfo.element是尚未绑定的未绑定模板的元素。

    这个阶段总是同步完成(构造函数和工厂函数不允许是异步的),因为每次组件被实例化时都会出现这种情况,如果涉及等待网络请求,性能将是不可接受的。

  4. viewmodel被绑定到视图

    如果组件没有viewmodel,则视图将绑定到您提供给组件绑定的任何参数。

  5. 组件处于活动状态

    现在组件正在运行,并且可以在需要时保持在屏幕上。

    如果传递给组件的任何参数是监控属性,则组件当然可以观察到任何改变,或者甚至回写修改的值。 这是它如何能够干净地与其父进行通信,而不是将组件代码紧密地耦合到使用它的任何父进程。

  6. 组件被拆卸,并且视图模型被删除

    If如果组件绑定的名称值可观察地改变,或者如果封闭的控制流绑定导致容器元素被移除,则在从DOM移除容器元素之前调用视图模型上的任何dispose函数。 参见本节:处置和内存管理。

    注意:如果用户导航到完全不同的网页,浏览器会执行此操作,而不会要求页面中运行的任何代码进行清理。 所以在这种情况下不会调用dispose函数。 这是正常的,因为浏览器会自动释放所有使用的对象使用的内存。

 

备注1:仅限模板组件

组件通常有viewmodels,但它们不一定必须。 组件只能指定一个模板。

在这种情况下,组件视图所绑定的对象是您传递给组件绑定的params对象。 例:

ko.components.register('special-offer', {  template: '<div data-bind="text: productName"></div>'});

...可以注入参数:

<div data-bind='component: {   name: "special-offer-callout",   params: { productName: someProduct.name }}'></div>

或者,更方便地,作为自定义元素:

<special-offer params='productName: someProduct.name'></special-offer>

备注2:使用没有容器元素的组件

有时,您可能想要将一个组件注入到视图中,而不使用额外的容器元素。 您可以使用基于注释标签的无容器控制流语法。 例如,

<!-- ko component: "message-editor" --><!-- /ko -->

...或传递参数:

<!-- ko component: {  name: "message-editor",  params: { initialText: "Hello, world!", otherParam: 123 }} --><!-- /ko -->

<!-- ko -- >和<!-- / ko -- >注释作为开始/结束标记,定义一个包含标记的“虚拟元素”。 Knockout理解这个虚拟元素的语法,并绑定,就像你有一个真正的容器元素。

备注3:将标记传递给组件

您附加组件绑定的元素可能包含进一步的标记。 例如,

<div data-bind="component: { name: 'my-special-list', params: { items: someArrayOfPeople } }">  <!-- Look, here's some arbitrary markup. By default it gets stripped out     and is replaced by the component output. -->  The person <em data-bind="text: name"></em>  is <em data-bind="text: age"></em> years old.</div>

虽然此元素中的DOM节点将被删除,并且不会默认绑定,但它们不会丢失。 相反,它们被提供给组件(在这种情况下,my-special-list),它可以将它们包括在它希望的输出中。

如果要构建表示“容器”UI元素的组件(如网格,列表,对话框或标签集),这需要注入并将任意标记绑定到公共结构中,这将非常有用。 它也可以在没有自定义元素的情况下使用上面显示的语法。

处置和内存管理

您的viewmodel类可能具有dispose函数。 如果实现了,当组件被删除并从DOM中删除时,Knockout会调用它(例如,因为相应的项从foreach中删除,或者如果绑定变为false)。

您必须使用dispose释放任何本质上不可回收的资源。 例如:

  • setInterval 回调将继续触发,直到显式清除。
    • 使用clearInterval(handle)来停止它们,否则你的viewmodel可能被保存在内存中。
  • ko.computed属性继续从其依赖关系接收通知,直到明确处置。
    • 如果一个依赖是一个外部对象,那么一定要使用.dispose()在computed属性,否则它(可能还有你的viewmodel)将被保存在内存中。 或者,考虑使用pureComputed以避免手工处置的需要。
  • 监控属性订阅将继续运行,直到明确被处理。
    • 如果你订阅了一个外部的observable,一定要使用.dispose()在订阅,否则回调(可能还有你的viewmodel)将被保存在内存中。
  • 外部DOM元素上手动创建的事件处理程序(如果在createViewModelfunction中创建)(甚至在常规组件视图模型内部,尽管适合您不应该使用的MVVM模式)必须删除。
    • 当然,您不必担心在视图中释放由标准Knockout绑定创建的任何事件处理程序,因为KO会在删除元素时自动注销它们。

例如:

var someExternalObservable = ko.observable(123); function SomeComponentViewModel() {  this.myComputed = ko.computed(function() {    return someExternalObservable() + 1;  }, this);   this.myPureComputed = ko.pureComputed(function() {    return someExternalObservable() + 2;  }, this);   this.mySubscription = someExternalObservable.subscribe(function(val) {    console.log('The external observable changed to ' + val);  }, this);   this.myIntervalHandle = window.setInterval(function() {    console.log('Another second passed, and the component is still alive.');  }, 1000);} SomeComponentViewModel.prototype.dispose = function() {  this.myComputed.dispose();  this.mySubscription.dispose();  window.clearInterval(this.myIntervalHandle);  // this.myPureComputed doesn't need to be manually disposed.} ko.components.register('your-component-name', {  viewModel: SomeComponentViewModel,  template: 'some template'});

不必严格地需要仅仅依赖于相同viewmodel对象的属性来处理计算和订阅,因为这仅创建了JavaScript垃圾收集器知道如何释放的循环引用。 然而,为了避免不必记住哪些事情需要处理,你可能更喜欢在任何可能的地方使用pureComputed,并且显式地处置所有其他计算/订阅,无论技术上是否必要。