knockout入门（一）

最新推荐文章于 2019-08-30 14:28:00 发布

鱼肉一锅汤

最新推荐文章于 2019-08-30 14:28:00 发布

阅读量1k

点赞数 2

分类专栏：前端框架文章标签： ko knockout入门 observables 依赖跟踪

原文链接：https://knockoutjs.com/documentation/

版权

前端框架专栏收录该内容

3 篇文章

订阅专栏

knockout入门（一）

knockout核心
observables
observableArray
- 操纵observableArray

knockout核心

ko围绕三个核心功能构建

可观察量和依赖性跟踪（observables）
声明性绑定（data-bind）
模板(template)

observables

observables属于特殊的JavaScript对象，他可以做到数据的双向绑定，也就是说，数据更改后会自动更新UI。

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

并非所有浏览器都支持JavaScript getter和setter（cough IE cough 报错），因此为了兼容性，ko.observable对象实际上是函数。
要读取observable的当前值，只需调用没有参数的observable。在此示例中，myViewModel.personName（）将返回“Bob”，myViewModel.personAge（）将返回123。

console.log(myViewMode.personName) -- Bob
console.log(myViewMode.personAge) -- 123

要向observable写入新值，请调用observable并将新值作为参数传递。例如，调用myViewModel.personName（‘Mary’）会将名称值更改为“Mary”。

myViewModel.personName（'Mary'）;
console.log(myViewMode.personName) -- Mary

要将值写入模型对象上的多个可观察属性，可以使用链接语法。例如，myViewModel.personName（‘Mary’）。personAge（50）会将名称值更改为“Mary”，将年龄值更改为50。

myViewModel.personAge（'50'）;
console.log(myViewMode.personAge) -- 50

可已看到observables是能够观察到被其绑定的数值的。这就是KO的许多内置绑定在内部所做的事情。因此，当您编写data-bind =“text：personName”时，文本绑定会自动注册，以便在personName更改时得到通知（假设它是一个可观察的值，现在是它）。

observableArray

observableArray跟踪数组中的对象，而不是这些对象的状态
简单地将对象放入observableArray并不会使该对象的所有属性本身都可观察到。当然，如果您愿意，您可以观察这些属性，但这是一个独立的选择。 observableArray只跟踪它所拥有的对象，并在添加或删除对象时通知侦听器。

var myObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);
myObservableArray.push('Some value');

在幕后，observableArray实际上是一个可观察的，其值是一个数组（另外，observableArray添加了下面描述的一些附加功能）。因此，您可以通过调用observableArray作为没有参数的函数来获取底层JavaScript数组，就像任何其他可观察对象一样。然后，您可以从该基础数组中读取信息。

console.log('The length of the array is ' + myObservableArray().length); -- 4
console.log('The first element is ' + myObservableArray()[0]); -- { name: "Bungle", type: "Bear" }

操纵observableArray

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

所有这些功能都相当于在底层阵列上运行本机 JavaScript 阵列功能，然后通知listener进行相关更改：

push( value )—在阵列末尾添加新项目。
pop()—从阵列中删除最后一个值并返回它。
unshift( value )—在阵列的开头插入新项目。
shift()—从阵列中删除第一个值并返回它。
reverse()-反转阵列的顺序并返回（而不是底层阵列）。
sort()-排序阵列内容并返回。
splice()-从给定索引开始删除并返回给定数量的元素。

以下为部分observableArray操作示例：

var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]);
 
myArray.push("Delta");
// Changes: [{ index: 3, status: 'added', value: 'Delta' }]
// New value: ["Alpha", "Beta", "Gamma", "Delta"]
 
myArray.pop();
// Changes: [{ index: 3, status: 'deleted', value: 'Delta' }]
// New value: ["Alpha", "Beta", "Gamma"]
 
myArray.splice(1, 2, "Omega");
// Changes:
// [{ index: 1, status: 'deleted', value: 'Beta' },
//  { index: 1, status: 'added', value: 'Omega' },
//  { index: 2, status: 'deleted', value: 'Gamma' }]
// New value: ["Alpha", "Omega"]
 
myArray.reverse();
// Changes:
// [{ index: 0, moved: 1, status: 'deleted', value: 'Alpha' },
//  { index: 1, moved: 0, status: 'added', value: 'Alpha' }]
// New value: ["Omega", "Alpha"]

sorted & reversed

sorted()—返回阵列的排序副本。这比如果想要将可观察到的阵列保留在其原始顺序中，但需要以特定顺序显示它更可取。sort默认排序是按字母顺序排列的，但您可以选择性地传递一个函数来控制应如何排序阵列。例如，要按姓氏对一组"人"对象进行排序，您可以写下：

var mySortedArray = ko.pureComputed(function () {
    return myObservableArray.sorted(function (left, right) {
        return left.lastName === right.lastName ? 0
             : left.lastName < right.lastName ? -1
             : 1;
    });
});

reversed()—返回阵列的反向副本。