Knockout学习笔记（一）--建立数据模型和监控属性

时间 2019-11-11

标签 knockout 学习笔记建立数据模型监控属性繁體版

原文原文链接

下面介绍下ko.applyBindings操做时使用的是什么样的参数：javascript

第一个参数是你想激活KO时用于声明式绑定的View Model对象；html

第二个参数（可选），你可使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如：java

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

它限制了只有ID为someElementId的元素才能激活使用KO功能，当你在一个页面中声明了多个View Model来绑定不一样的界面区域时，这样限制是颇有好处的。jquery

下面是一个建立最基础的View-Model并绑定到ko的例子。ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                userName: "Kitty"
            }
            //ko绑定View-Model对象
            ko.applyBindings(myViewModel);
        }
    </script>
</head>
<body>
<p>Hello:<span data-bind="text: userName"></span></p>
</body>
</html>

KO最重要的一个属性就是当View Model发生变化时可以自动的更新UI界面。KO是如何可以知道你的View Model已经发生改变了呢？答案是：你须要将你的model属性声明成observable的, 由于它是很是特殊的JavaScript 对象，可以通知用户它的改变以及自动检测依赖关系。api

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

你根本不须要对View进行更改，全部的data-bind语法依然正常工做。所不一样的是，如今它可以自动检测变化，并通知它自动更新界面（View）。浏览器

并非全部的浏览器都支持JavaScript的getters and setters (好比IE)，因此，为了兼容，ko.observable监控的对象都是方法。app

Reading and writing observables

一、读取当前监控的属性值，只须要直接调用observable（不须要参数），在这个例子当中，调用myViewModel.personName()将会返回'Bob'，调用myViewModel.personAge() 将会返回'123'google

二、写一个新值到监控属性上，调用observable方法，将要写的值做为一个参数传入便可。例如，调用myViewModel.personName('Mary') 将会把名称改变成 'Mary'。spa

三、一次性改变Model对象监控的多个属性值，你可使用链式方法。例如：myViewModel.personName('Mary').personAge(50) 将会把名称改变成'Mary'将年龄设置为 50.

监控属性最重要的一点就是能够随时监控，也就是说，其余代码能够告诉它哪些是须要通知发生变化的。这就是为何KO会有如此多的内置绑定语法。因此，当你在页面中编写data-bind="text: personName"，text 会绑定注册到自身，当personName发生变化时，它可以当即获得通知。

当你经过调用 myViewModel.personName('Mary') 将名称的值改变成为'Mary'时，text绑定会自动更新新值到其对应的DOM对象元素上,这就是为何改变数据模型可以自动刷新View页面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                personName: ko.observable('Bob'),
                personAge: ko.observable(1)
            };
            function start(){
                setInterval(function(){
                    myViewModel.personAge(myViewModel.personAge()+1);
                    console.log(myViewModel.personAge());
                }, 1000);
            };

            //ko绑定View-Model对象
            ko.applyBindings(myViewModel);
            start();
        }

    </script>
</head>
<body>
<p>Hello:<span data-bind="text: personName"></span></p>
<p>personAge:<span data-bind="text: personAge"></span></p>
</body>
</html>

监控属性（Observables）的显式订阅

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                personName: ko.observable('Bob'),
                personAge: ko.observable(1)
            };
            
            //显示订阅
            var subscription = myViewModel.personAge.subscribe(function (newValue) {
                console.log("newValue:"+newValue)
            });

            function start(){
                setInterval(function(){
                    myViewModel.personAge(myViewModel.personAge()+1);
                    console.log(myViewModel.personAge());
                    
                    //释放订阅方法
                    if (myViewModel.personAge() >= 5)
                        subscription.dispose();
                }, 1000);
            };

            //ko绑定View-Model对象
            ko.applyBindings(myViewModel);
            start();
        }

    </script>
</head>
<body>
<p>Hello:<span data-bind="text: personName"></span></p>
<p>personAge:<span data-bind="text: personAge"></span></p>
</body>
</html>