knockoutjs复杂对象的可观察性

问题

对于一般数据结构：

1、 对于基本类型的数据的变更的可观察性（observable）， 可以使用  ko.observable(xxx) 来声明一个 observable对象，

　　或将其绑定到视图，

　　或将其绑定到其它 ko.computed 或者 ko.pureComputed 对象中；

　　或者使用subscribe单独订阅其变化。

2、 对于数组型号数据结构， ko提供 ko.observableArray(xxx), 将数组做成一个可观察对象， 并开放一些类似数组的 方法，

　　使用这些方法， 一旦数组发生变化， 则观察者能够被通知到。

pop, push, shift, unshift, reverse, sort, splice

All of these functions are equivalent to running the native JavaScript array functions on the underlying array, and then notifying listeners about the change:

• push( value ) — Adds a new item to the end of array.
• pop() — Removes the last value from the array and returns it.
• unshift( value ) — Inserts a new item at the beginning of the array.
• shift() — Removes the first value from the array and returns it.
• reverse() — Reverses the order of the array and returns the observableArray (not the underlying array).
• sort() — Sorts the array contents and returns the observableArray. The default sort is alphabetical, but you can optionally pass a function to control how the array should be sorted. See the example under sorted below.
• splice() — Removes and returns a given number of elements starting from a given index. For example, myObservableArray.splice(1, 3) removes three elements starting from index position 1 (i.e., the 2nd, 3rd, and 4th elements) and returns them as an array.

replace, remove and removeAll

observableArray adds some more useful methods that aren’t found on JavaScript arrays by default:

• replace( oldItem, newItem ) — Replaces the first value that equals oldItem with newItem.
• remove( someItem ) — Removes all values that equal someItem and returns them as an array.
• remove( function (item) { return item.age < 18; } ) — Removes all values whose age property is less than 18, and returns them as an array.
• removeAll( ['Chad', 132, undefined] ) — Removes all values that equal 'Chad', 123, or undefined and returns them as an array.
• removeAll() — Removes all values and returns them as an array.

问题来了， 我们的经常使用的 json数据结构， 类似restful等接口提供的数据， 如何观测其变化， 并通知到观察者？

KO.MAPPING

https://knockoutjs.com/documentation/plugins-mapping.html

使用ko,mapping插件， 可以将json对象， 转换一个嵌套的元素级别的可观察对象。

例如：

-------------------------------------

[

    1, 2, 3

]

这个跟 ko.observableArray功能一致。

------------------------------------

[

{

　　"a": 1

}

]

除了最外层的数组，被转换为 ko.observableArray外， 内部嵌套 "a"的属性值，也被转换为一个 ko.observable对象。

Example: Using ko.mapping

To create a view model via the mapping plugin, replace the creation of viewModel in the code above with the ko.mapping.fromJS function:

var viewModel = ko.mapping.fromJS(data);

This automatically creates observable properties for each of the properties on data. Then, every time you receive new data from the server, you can update all the properties on viewModel in one step by calling the ko.mapping.fromJS function again:

// Every time data is received from the server:

ko.mapping.fromJS(data, viewModel);

但是整个 {} 本身是没有被转换为 ko.observable 对象。

下面给给出一个简单方法

对整个{}对象观察

ko.observable

https://knockoutjs.com/documentation/observables.html

var json = {"a": 1}

var obser = ko.observable(json);

var kobser = ko.computed(function(){

　　return obser()["a"] + 1;

})

// 这样一改变后， kobser也会跟着变化。

obser({"a": 2})

Writable computed observables

https://knockoutjs.com/documentation/computed-writable.html

为json对象定义到一个 ko.computed对象， 使用read方法负责读， 使用write负责写。 本质上与ko.observable方法相同，有特殊逻辑处理的时候， 才用这个方法。

function MyViewModel() {

    this.firstName = ko.observable('Planet');

    this.lastName = ko.observable('Earth');

 

    this.fullName = ko.pureComputed({

        read: function () {

            return this.firstName() + " " + this.lastName();

        },

        write: function (value) {

            var lastSpacePos = value.lastIndexOf(" ");

            if (lastSpacePos > 0) { // Ignore values with no space character

                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"

                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"

            }

        },

        owner: this

    });

}

 

ko.applyBindings(new MyViewModel());

knockout-store

https://github.com/Spreetail/knockout-store