Knockout学习笔记--创建数据模型和监控属性

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Knockout学习笔记--创建数据模型和监控属性相关的知识，希望对你有一定的参考价值。

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

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

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

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

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

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

<!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 对象，能够通知用户它的改变以及自动检测依赖关系。

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

你根本不需要对View进行更改，所有的data-bind语法依然正常工作。所不同的是，现在它能够自动检测变化，并通知它自动更新界面（View）。

并不是所有的浏览器都支持JavaScript的getters and setters (比如IE)，所以，为了兼容，ko.observable监控的对象都是方法。

Reading and writing observables

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

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

3、一次性改变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>

 

以上是关于Knockout学习笔记--创建数据模型和监控属性的主要内容，如果未能解决你的问题，请参考以下文章

knockout.js

knockout.js

knockout学习资料

（初）Knockout 监控属性(Observables)

knockout 学习使用笔记----绑定map--双向绑定

学习汤姆大叔的knockout教程笔记