JavaScript数据绑定databind框架knockout

Knockout是一个轻量级的UI类库，使用的是MVVM（model-view-viewModel）模式，能够让JavaScript前端简单化，用于页面的数据绑定。使用它可以减少web前端js的代码量，而且knockout轻量级，并不会增加整个页面的臃肿程度。

一、下载使用

直接到官网下载knockoutjs，下载后保存为js文件格式放在一个web目录下，然后在页面上添加<script>就可以直接使用knockoutjs的功能属性了。

如果不下载也可以，使用其他提供商的url来直接使用

<script type="text/javascript" src="http://http://knockoutjs.com/downloads/knockout-3.4.0.js"  ><script>

当然，要经常检查src是否可用。

二、简单data-bind

在页面上添加<script>之后，添加如下js代码

<p><input id="a1" data-bind="value:user" /></p>

<p><input  id="a2" data-bind="value:user" /></p>

<p>Hello, <span data-bind="text:user"></span></p>


<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="knockout-3.4.0.js"  ></script>
    <script type="text/javascript">

        var viewModel = function(){
            var self = this;
            self.user = ko.observable("");
        };

        var currentView = new viewModel() ;
        ko.applyBindings(currentView);
        //currentView.user("sdfe");

</script>

<input>, <span>元素添加了一个data-bind属性，这是加入knockoutjs才有。相当于绑定了数据user。由于上述三个元素绑定了同一个数据user，所以当user发生改变时，三个元素都会跟着改变。对应于不同的元素，绑定时的属性（value，text...）会有所不同。

绑定的数据是user，但user的数据是什么？后面的js代码解答了这个问题。ko是knockout的缩写同时也是对象，knockout很大一部分操作都需要通过这个对象来完成。ko.applyBindings(model)，里面的参数model就是ko里面的数据源。该参数定义里面某些属性设置了ko.observable，大概的意思就是让ko能够观察，从而让其他元素能够通过ko来bind此数据。

三、dependentObservable()

从名字上看，这是声明一个依赖其他数据的数据源。添加如下代码

<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>

<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="knockout-3.4.0.js"  ></script>
    <script type="text/javascript">

    var viewModel = {
        firstName: ko.observable("Planet"),
        lastName: ko.observable("Earth")
    };

    viewModel.fullName = ko.dependentObservable({

        read: function () {
            return this.firstName() + " " + this.lastName();
        },

        write: function (value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: viewModel
    });

    ko.applyBindings(viewModel);

</script>

内容如2类似，添加了一个ko依赖可观察的数据fullName。调用dependentobservable函数，并传入了一个json对象。该json的属性有：

-read：用来执行取得依赖监控属性当前值的函数

-write：当监控数据发生改变时回调的函数

-owner：一个对象，代表上述两个函数里面的this

实现效果，当<input>输入的姓名被一个空格隔开时，姓和名被自动分隔并填充到对应的<span>上。

---------本博客内容为本人的学习总结，若有问题，请联系本人----------