Knockout学习之监控属性

监控属性

Knockout包含以下三个核心特性：

1.监控属性和依赖跟踪

2.显式绑定

3.模板

 

下面我们将学习这三点中的第一点，在这之前我们先研究下MVVM模式和视图模型的概念。

 

MVVM和视图模型

模型：用来存储应用中的数据。它处于业务领域中，并且包含了相关的属性以及操作，与用户界面独立。在使用OK时，你将经常使用ajax保持该模型与服务端同步。

视图模型：使用纯代码表示界面的数据和操作。比如，你要实现一个列表编辑功能，那么你的视图模型就需要维持一组数据项，同时还要提供添加和删除方法。

视图：能够通过可视和可交互的方式呈现视图模型。它可以显示来自视图模型中的数据，也能将用户操作的命令传递给视图模型。

 

当你使用了KO，你的视图只需要由简单的html文档和显式绑定就可以轻松的连接到视图模型，或者你还可以使用模板配合视图模型中的数据生成html代码。

 

下面我们使用KO创建一个视图模型：

 

你可以使用依赖绑定去创建一个非常简单的视图去呈现该视图模型。例如，下面的代码将显示personName的值：

 

使用knockout执行绑定

虽然data-bind并不是HTML中原生态的属性，但是它不会有任何问题。浏览器也无法知道它的含义，所以你需要使用knockout使其有效果。

 

下面我们将使用knockout执行绑定：

 

打开页面你将看到和下面的html一样的结果：

 

下面是关于applyBindings参数的说明：

第一个参数是你想激活依赖绑定的视图模型

第二个参数是可选的，主要是用来规定需要绑定的视图对象，比如我们可以这么写ko.applyBindings(myViewMode,document,getElementById(‘someElementId’))。

 

监控属性

现在你已经会创建基本的视图模型了，下面我们还要学习如何监控视图模型中的数据，从而可以在视图模型中的数据发生改变的时候将视图也改变。

 

下面我们将之前的视图模型改写：

 

现在你不需要手动保持视图的更新，这些会由knockout帮你自动更新。一旦视图模型的被监控的属性发生改变对应的视图也会随之改变。

 

读取和写监控属性

读取为当前命名为该属性名称的函数，不含有任何参数。

写为当前命名为该属性名的函数，并加上需要赋的值。

 

显式订阅监控属性事件

虽然knockout帮我们自动更新了视图，但是有时候我们需要对传入的值进行判断，那么我们就需要订阅这个事件。

 

下面我们可以通过subscribe进行订阅：

 

下面是关于该函数的参数说明：

第一个参数是指定回调的函数，第二个参数是可选的，用来指定回调函数执行的上下文，第三个参数是需要订阅的事件类型（默认为change，另一个是beforeChange）。

 

同时该函数还会返回一个对象，我们可以通过该返回值取消订阅，比如下面所示的代码：

 

Knockout默认情况下，如果赋的值跟当前属性的值相同，是不会触发change事件的，但是有时我们需要让其也能够触发，那么我们可以加上如下的代码：

 

延迟触发事件

笔者看到这个一时还不知道具体运用在哪，这里就顺便带以下吧，主要跟上面的方式相同，时间是毫秒：

 

下面是笔者的测试代码：

<input type="text" data-bind="value: personName" />

    <script type="text/javascript">
        var myViewModel = {
            personName: ko.observable("Job"),
            personAge: ko.observable(123)
        };

        //myViewModel.personName.extend({ notify: "always" });

        myViewModel.personName.extend({ rateLimit: 1000 });

        myViewModel.personName.subscribe(function (oldValue) {
            console.log("the old value is " + oldValue);
        }, null, "beforeChange");
        
        myViewModel.personName.subscribe(function (newValue) {
            console.log("the new value is " + newValue);
        });

        myViewModel.personName("Job");

        myViewModel.personName("Job");

        ko.applyBindings(myViewModel);
    </script>