首页 > 代码库 > 2.Knockout.Js官网学习（监控属性Observables）

2.Knockout.Js官网学习（监控属性Observables）

2024-08-07 08:51:43   215人阅读

前言

1.创建一个ViewModel

<script type="text/javascript">    //1.创建一个ViewModel    var myViewModel = {        personName:‘aehyok‘,        personAge:25    };  </script>

2.为ViewModel创建一个声明式绑定的简单的View

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

3.激活Knockout

1
ko.applyBindings(myViewModel);

4.查看运行效果

Observables监控属性

　　现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects，能够通知订阅者它的改变以及自动探测到相关的依赖。

例如：将上述的例子修改为

1
2
3
4
var myViewModel = {
    personName: ko.observable(‘aehyok‘),
    personAge: ko.observable(25)
};

你根本不需要修改view – 所有的data-bind语法依然工作，不同的是他能监控到变化，当值改变时，view会自动更新。

 监控属性的读操作（read）

1
2
///监控属性的读操作（read）
alert(myViewModel.personAge);

监控属性的写操作（write）

1
2
///监控属性的写操作（write）
myViewModel.personName("aehyok-Test");

　　

Dependent Observables依赖监控属性

如果你已经有了监控属性firstName和lastName，你想显示全称怎么办？ 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。

 例如：继续在上面的ViewModel中添加两个属性 firstName和lastName

1
2
3
4
5
6
var myViewModel = {
    personName: ko.observable(‘aehyok‘),
    personAge: ko.observable(25),
    firstName: ko.observable(‘aehyok‘),
    lastName: ko.observable(‘Leo‘)
};

并且添加一个依赖监控属性，来返回姓名的全称

1
2
3
4
///依赖监控属性
myViewModel.fullName = ko.dependentObservable(function () {
    return this.firstName() + " " + this.lastName();
}, myViewModel);

并且绑定到View视图界面上的元素

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

不管firstName还是lastName改变，全称fullName都会自动更新（不管谁改变，执行函数都会调用一次，不管改变成什么，他的值都会更新到UI或者其他依赖监控属性上）。

优化上面fullname的监控属性

　　

1
2
3
4
var viewModel = {
    firstName: ko.observable("aehyok"),
    lastName:ko.observable("Leo")
};

对fullName的依赖监控属性进行调整

1
2
3
4
5
6
7
8
9
10
11
12
13
viewModel.fullName = ko.dependentObservable({
    read:function() {
        return this.firstName() + " " + this.lastName();
    },
    write:function(value) {
        var lastSpacePos = value.lastIndexOf(" ");
        if(lastSpacePos>0) {
            this.firstName(value.substring(0, lastSpacePos));
            this.lastName(value.substring(lastSpacePos + 1));
        }
    },
    owner: viewModel
});

这个例子里，写操作的callback接受写入的值，把值分离出来，分别写入到“firstName”和“lastName”上。 你可以像普通情况一样将这个view model绑定到DOM元素上，如下：

 

1
2
3
<p>First name: <span data-bind="text: firstName"></span></p>
<p>Last name: <span data-bind="text: lastName"></span></p>
<h2>Hello, <input data-bind="value: fullName"/>!</h2>

然后运行在文本框上录入会看到如下效果

上面的view model演示的是通过一个简单的参数来初始化依赖监控属性。你可以给下面的属性传入任何JavaScript对象：

 1. read — 必选，一个用来执行取得依赖监控属性当前值的函数。

 2.write — 可选，如果声明将使你的依赖监控属性可写，别的代码如果这个可写功能写入新值，通过自定义逻辑将值再写入各个基础的监控属性上。

 3.owner — 可选，如果声明，它就是KO调用read或write的callback时用到的this。

Value转换器

　　有时候你可能需要显示一些不同格式的数据，从基础的数据转化成显示格式。比如，你存储价格为float类型，但是允许用户编辑的字段需要支持货币单位和小数点。你可以用可写的依赖监控属性来实现，然后解析传入的数据到基本 float类型里：

1
2
3
4
5
6
7
8
9
10
viewModel.formattedPrice=ko.dependentObservable({
    read:function () {
        return "$" + this.price().toFixed(2);
    },
    write:function(value) {
        value = http://www.mamicode.com/parseFloat(value.replace(/[^/d]/g, ""));
        this.price(isNaN(value) ? 0 : value);
    },
    owner:viewModel
});

然后绑定到textbox上面

1
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>

所以，不管用户什么时候输入新价格，输入什么格式，text box里会自动更新为带有2位小数点和货币符号的数值。这样用户可以看到你的程序有多聪明，来告诉用户只能输入2位小数，否则的话自动删除多余的位数，当 然也不能输入负数，因为write的callback函数会自动删除负号。

过滤并验证用户输入

继续在上面的ViewModel中添加两个属性

1
2
3
4
5
6
7
var viewModel = {
    firstName: ko.observable("aehyok"),
    lastName: ko.observable("Leo"),
    price: ko.observable(22.466),
    acceptedNumericValue: ko.observable(123),
    lastInputWasValid: ko.observable(true)
};

 然后添加一个依赖监控属性

1
2
3
4
5
6
7
8
9
10
11
12
viewModel.attemptedValue = http://www.mamicode.com/ko.dependentObservable({
    read: viewModel.acceptedNumericValue,
    write: function (value) {
        if (isNaN(value)) {
            this.lastInputWasValid(false);
        } else {
            this.lastInputWasValid(true);
            this.acceptedNumericValue(value);
        }
    },
    owner:viewModel
});

进行绑定View视图界面元素

1
2
<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p>
<div data-bind="visible: !lastInputWasValid()">That‘s not a number!</div>

现在，acceptedNumericValue 将只接受数字，其它任何输入的值都会触发显示验证信息，而会更新acceptedNumericValue。

前言

　　如果你要探测和响应一个对象的变化，你应该用observables。

　　如果你需要探测和响应一个集合对象的变化，你应该用observableArray 。

　　在很多场景下，它都非常有用，比如你要在UI上需要显示/编辑的一个列表数据集合，然后对集合进行添加和删除。

使用observables数组

 1.简单举例

<script type="text/javascript">    var myObservableArray = ko.observableArray();  ///初始化一个空的数组    myObservableArray.push("Some Value");          ///向数组中添加一个项</script>

2.关键点：监控数组跟踪的是数组里的对象，而不是这些对象自身的状态。

简单说，将一对象放在observableArray 里不会使这个对象本身的属性变化可监控的。当然你自己也可以声明这个对象的属性为observable的，但它就成了一个依赖监控对象了。一个 observableArray 仅仅监控他拥有的对象，并在这些对象添加或者删除的时候发出通知。

3.预加载一个监控数组observableArray

如果你想让你的监控数组在开始的时候就有一些初始值，那么在声明的时候，你可以在构造器里加入这些初始对象。例如：

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

4.从observableArray里读取信息

一个observableArray其实就是一个observable的监控对象，只不过他的值是一个数组（observableArray还加了 很多其他特性，稍后介绍）。所以你可以像获取普通的observable的值一样，只需要调用无参函数就可以获取自身的值了。 例如，你可以像下面这样获取它的值：

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

理论上你可以使用任何原生的JavaScript数组函数来操作这些数组，但是KO提供了更好的功能等价函数，他们非常有用是因为：

　　A:兼容所有浏览器。（例如indexOf不能在IE8和早期版本上使用，但KO自己的indexOf 可以在所有浏览器上使用）

　　B:在数组操作函数方面（例如push和splice），KO自己的方式可以自动触发依赖跟踪，并且通知所有的订阅者它的变化，然后让UI界面也相应的自动更新。

　　C：语法更方便，调用KO的push方法，只需要这样写：myObservableArray.push(...)。 比如原生数组的myObservableArray().push(...)好用多了。

5.IndexOf和slice

　　indexOf 函数返回的是第一个等于你参数数组项的索引。例如：myObservableArray.indexOf(‘Blah‘)将返回以0为第一个索引的第一个等于Blah的数组项的索引。如果没有找到相等的，将返回-1。　　

　　slice函数是observableArray相对于JavaScript 原生函数slice的等价函数（返回给定的从开始索引到结束索引之间所有的对象集合）。 调用myObservableArray.slice(...)等价于调用JavaScript原生函数（例 如：myObservableArray().slice(...)）。

6.操作observableArray

　　observableArray 展现的是数组对象相似的函数并通知订阅者的功能。

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

所有这些函数都是和JavaScript数组原生函数等价的，唯一不同的数组改变可以通知订阅者：

    myObservableArray.push(‘Some new value‘);// 在数组末尾添加一个新项    myObservableArray.pop();// 删除数组最后一个项并返回该项    myObservableArray.unshift(‘Some new value‘);// 在数组头部添加一个项    myObservableArray.shift();// 删除数组头部第一项并返回该项    myObservableArray.reverse();// 翻转整个数组的顺序    myObservableArray.sort();// 给数组排序

默认情况下，是按照字符排序（如果是字符）或者数字排序（如果是数字）。

   你可以排序传入一个排序函数进行排序，该排序函数需要接受2个参数（代表该数组里需要比较的项），如果第一个项小于第二个项，返回-1，大于则返回1，等于返回0。例如：用lastname给person排序，你可以这样写：

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

myObservableArray.splice() 删除指定开始索引和指定数目的数组对象元素。例如myObservableArray.splice(1, 3) 从索引1开始删除3个元素（第2,3,4个元素）然后将这些元素作为一个数组对象返回。

更多observableArray 函数的信息，请参考等价的JavaScript数组标准函数。

7.remove和removeAll

observableArray 添加了一些JavaScript数组默认没有但非常有用的函数：

    myObservableArray.remove(someItem);// 删除所有等于someItem的元素并将被删除元素作为一个数组返回    myObservableArray.remove(function (item) { return item.age < 18;}) ;//删除所有age属性小于18的元素并将被删除元素作为一个数组返回    myObservableArray.removeAll([‘Chad‘, 132, undefined]);//删除所有等于‘Chad‘, 123, or undefined的元素并将被删除元素作为一个数组返回

2.Knockout.Js官网学习（监控属性Observables）


联系
我们