zoukankan      html  css  js  c++  java
  • 使用计算监控(Using computed observables)

    计算监控(Computed Observables)

    如果有两个监控属性firstName, lastName,此时我们要显示full name,我们要怎么办呢? 这时,可以创建一个computed observables来实现,其实他就是一个function,根据firstName, lastName计算得到full name。当first name, lastName改变时,fullName也会自动更新。

    例如,看下面的view model:

    function AppViewModel() {
        this.firstName = ko.observable('Bob');
        this.lastName = ko.observable('Smith');
    }

    然后加入full name:

    function AppViewModel() {
        // ... leave firstName and lastName unchanged ...
     
        this.fullName = ko.computed(function() {
            return this.firstName() + " " + this.lastName();
        }, this);
    }

    然后,UI这样显示:

    The name is <span data-bind="text: fullName"></span>

    这样,当firstName或者lastName改变时,fullName都会更改,并且会在UI上进行更新。(此时函数会执行一次)

    依赖链

    (参考:http://www.cnblogs.com/TomXu/archive/2011/11/22/2256820.html)

    理所当然,如果你想你可以创建一个依赖监控属性的链。例如:

    • 监控属性items表述一组列表项
    • 监控属性selectedIndexes保存着被用户选上的列表项的索引
    • 依赖监控属性selectedItems 返回的是selectedIndexes 对应的列表项数组
    • 另一个依赖监控属性返回的true或false依赖于 selectedItems 的各个列表项是否包含一些属性(例如,是否新的或者还未保存的)。一些UI element(像按钮的启用/禁用)的状态取决于这个值)。

     然后,items或者selectedIndexes 的改变将会影响到所有依赖监控属性的链,所有绑定这些属性的UI元素都会自动更新。

    管理'this'

    ko.computed的第二个参数定义了this的值。如果不传这个参数,我们将不可以直接使用this.firstName()和this.lastName().

    (下面这句没看懂 http://www.cnblogs.com/TomXu/archive/2011/11/22/2256820.html)

    老练的JavaScript 开发人员不觉得this怎么样,但是如果你不熟悉JavaScript,那就对它就会很陌生。(C#和Java需要不需要为set一个值为设置this,但是JavaScript 需要,因为默认情况下他们的函数自身不是任何对象的一部分)。

    您也可以不用传this做为参数,而使用一种比较简单的方式实现。就是在viewmodel里把this赋给一个变量(比如叫做 self),然后我们就可以在viewmodel里的任何地方使用self的值。例如:

    function AppViewModel() {
        var self = this;
     
        self.firstName = ko.observable('Bob');
        self.lastName = ko.observable('Smith');
        self.fullName = ko.computed(function() {
            return self.firstName() + " " + self.lastName();
        });
    }

    因为self声明在函数的闭包里,它可以在任何嵌套的函数中使用,包括computed observable。这一点在事件处理时更有用,可以参照示例

     纯计算监控(Pure computed observables)

    如果一个计算监控(computed observable),只是根据其他值来计算得到一个值,最好将它声明成ko.pureComputed而不是使用ko.computed。例如:

    this.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    这样做的好处是,knockout可以更有效的对其进行评估及内存使用。当没有其他代码依赖它时,knockout会自动的暂停或者释放这个它。

    纯计算属性(pure computed)在knouckout 3.2.0才有。参见:more about pure computed observables.

    另外两个属性,前面两章每个都有,这里不写了:

    notify: 'always' 扩展, extend({ rateLimit: 50 })扩展

    判断属性是否是计算监控属性(Determining if a property is a computed observable)

    knockout提供了ko.isComputed来判断。例如:

    for (var prop in myObject) {
      if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {
          result[prop] = myObject[prop];
      }
    }

    类似的,knockout还提供了另外两个函数来操作 observables 和 computed observables:

    ko.isObservable

    ko.isWritableObservable

  • 相关阅读:
    Linux 查看内存状态
    Linux sar工具安装使用
    DNS ARP地址解析原理
    TCP/UDP 端口
    TCP/IP 传输原理
    Window vagrant 安装部署【转】
    Window7下vagrant的部署
    Ubuntu下访问SSH
    使用 Vagrant 打造跨平台开发环境
    Vagrant入门[转]
  • 原文地址:https://www.cnblogs.com/wileywong/p/4194199.html
Copyright © 2011-2022 走看看