Knockout.js 学习 （六）-- 监控属性数组 applyBinding & Observables

如果你想发现并响应一个对象的改变，就应该用监控属性（observables）。如果你想发现并响应一个集合的变化，就该用监控属性数组（observableArray）。监控属性数组在 显示或编辑多个值 以及 对界面的一部分重复显示或隐藏（如添加删除条目）等多种情况下 都是很有用的。

如果我们想要使用Knockoutjs表示多个值的话我们可以使用数组监控(Observable Arrays)来表示，形式如下：

var myObservableArray = ko.observableArray();

myObservableArray.push('Some value');

在第一行我们实例化了一个数组，在第二行我们向此数组中添加了一条记录，正如我们看到的那样，往数组中添加数组我们使用push方法。当然我们也可以在初始化数组的时候为其赋初值，代码如下：

var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]);

以上的代码我们在定义一个数组的同时为其赋了初值，这样我们就可以通过以下的方法进行数组的访问了：

alert('The length of the array is ' + myObservableArray().length); alert('The first element is ' + myObservableArray()[0]);

在第一行的代码中我们使用了数组的length属性来求得数组的长度，在第二行的代码中我们取得了数组的第一个值。

Knockoutjs数组常用的方法如下：

（1）、myObservableArray.push('Some new value')：增加一个新的元素

（2）、myObservableArray.pop()：删除一个元素，并返回其值

（3）、myObservableArray.unshift('Some new value')：在数组的开始处增加一个新的元素

（4）、myObservableArray.shift()：删除数组的第一个元素，并返回其值

（5）、myObservableArray.reverse()：反转数组的顺序

（6）、myObservableArray.sort()：数组排序。排序规则可以由用户自己定义也可以使用默认，默认情况下按照字母顺序或者数字的顺序进行排序。自己定义排序规则时需要接收数组 中的两个元素，并且需要返回一个数值，当此值小于0时表示第一个元素较小，当此值大于0时，表示第二个元素较小，当等于0时表示两个元素相等。示例如下：

myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })

（7）、myObservableArray.splice()：数组截取。例如：myObservableArray.splice(1, 3)，代表从数组的第一个元素开始，截取三个元素，并且将他们作为数组返回。

remove and removeAll

observableArray 增加了一些更有用的方法，而且是Js数组没有的

  • myObservableArray.remove(someItem) 移除myObservableArray数组内所有匹配someItem的对象， 并把这些对象组成一个数组返回
  • myObservableArray.remove(function(item) { return item.age < 18 }) 移除myObservableArray数组内所有年龄属性小于18的对象，并返回这些对象组成的新数组
  • myObservableArray.removeAll(['Chad', 132, undefined]) 移除myObservableArray数组内所有匹配'Chad',123, or undefined 的对象并把它们组成新数组返回
  • myObservableArray.removeAll() 移除myObservableArray数组内所有数据，并返回这些数据组成的一个新数组

applyBinding & Observables

一般的数据绑定有三种:One-Time，One-Way，Two-way。

One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定，程序不会继续追踪数据的在两者中任何一方的变化，这种绑定方式很使用于报表数据，数据仅仅会加载一次。
One-Way绑定模式即为单向绑定，即object-UI的绑定，只有当viewModel中数据发生了变化，UI中的数据也将会随之发生变化，反之不然。
Two-Way绑定模式为双向绑定，无论数据在Object或者是UI中发生变化，应用程序将会更新另一方，这是最为灵活的绑定方式，同时代价也是最大的。
数据绑定只是作为元素的自定义属性写上标签内，并不能决定它是何种绑定。

如果值是通过ko.observable定义的说明是双向绑定，否则为One-Time绑定，在knockout不存在单向绑定。

applyBindings
ko.applyBindings（myViewModel）; // Knockout调用applyBindings激活myViewModel（即把myViewModel和View中的声明式绑定data-bind接洽关系起来）
ko.applyBindings（myViewModel， document.getElementById（""someElementId""））; // 限制只在指定对象someElementId和后代节点中进行激活操纵。
personName: ko.observable（""Bob""），
The name is <span data-bind="text: personName"></span> // 静态绑定

Observables
并不是所有的浏览器都支撑JavaScript的getters和setters办法（IE），是以从兼容性推敲，ko.observable是function。
读取observable属性：myViewModel.personName（）
设置observable属性：myViewModel.personName（""Mary""）
同时设置多个observable属性：myViewModel.personName（""Mary""）.personAge（50） 链式语法 

// 动态绑定（主动订阅，作废订阅）
var subscription = myViewModel.personName.subscribe（function（newValue） { /* do stuff */ }）;
// ...then later...
subscription.dispose（）; // I no longer want notifications

// Computed Observables
    this.fullName = ko.computed（function（） {
        return this.firstName（） + " " + this.lastName（）;
    }， this）;

var myObservableArray = ko.observableArray（）;    // Initially an empty array
myObservableArray.push（""Some value""）;            // Adds the value and notifies observers

// 初始化绑定命组
// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray（[
    { name: "Bungle"， type: "Bear" }，
    { name: "George"， type: "Hippo" }，
    { name: "Zippy"， type: "Unknown" }
]）;


// 自定义排序
myObservableArray.sort（function（left， right） { return left.lastName == right.lastName ？ 0 : （left.lastName < right.lastName ？ -1 : 1） }）

// 可写的依附属性 --- 数字主动格局化显示，保存值时移除无关逗号
function MyViewModel（） {
    this.price = ko.observable（25.99）;
         
    this.formattedPrice = ko.computed（{
        read: function （） {
            return ""￥"" + this.price（）.toFixed（2）;
        }，
        write: function （value） {
            // Strip out unwanted characters， parse as float， then write the raw data back to the underlying "price" observable
            value = parseFloat（value.replace（/[^.d]/g， ""））;
            this.price（isNaN（value） ？ 0 : value）; // Write to underlying storage
        }，
        owner: this
    }）;
}
 
ko.applyBindings（new MyViewModel（））;


Writeable computed observables可写的依附属性（FirstName 和 FullName彼此换算，数字主动格局化显示）
ko.dependentObservable（Knockout 2.0中新增长的办法，和ko.computed等价，然则加倍便利懂得应用）
Observable Arrays
observableArray ：跟踪的是数组中的对象，而不是对象的状况。即observableArray 仅跟踪它拥有的对象，并且在对象被添加或者删除的时辰，通知listeners 。要监控对象的属性变更，须要编写自力的代码。
因为observableArray（）办法放回的是一个数组，是以从技巧上来说，任何Javascript关于数组操纵的原生办法都能直接应用。然则基于下述来由，凡是推荐应用KO中的等价办法：
1，KO中的办法支撑所有主流浏览器（比如，Javascript原生办法indexOf在<=IE8时不正常，而KO的indexOf 能正常工作）
2，dependency tracking
3，语法加倍简洁：调用KO中的办法应用myObservableArray.push（...），调用原生Javascript中的办法应用myObservableArray（）.push（...）
具体每个办法参考下面链接中的文档
observableArray 排序：默认对字符串用字母排序，对数字用数值排序。可以自定义排序办法：参考代码块中的代码

posted @ 2013-11-22 11:10  风舞烟  阅读(3138)  评论(0)  编辑  收藏  举报