KnockoutJS 实例

最近开始用KnockoutJS 作为client的主要框架，结合Bootstrap, BootstrapValidator, 直接调用Web api，绕过MVC的controller那层来交互数据，效果非常不错，项目做到现在进度一半，knockout的优点很多，所以这里小结一下：

 

 

Q: 什么是KnockoutJS?

A: 我们都叫它KO, 一个基于MVVM架构的轻量级JavaScript框架，最大的特点就是支持界面Dom对象和JS 数据对象的双向绑定。

 

 

Q：KO的优点?

• 免费，使用MIT开源软件许可协议
• 纯JavaScript, 可以和任何其他框架一起工作,没有依赖
• 轻量级框架， 相对于AugularJS， jQuery，压缩后只有20kb
• 已经比较成熟，支持IE6+, Firefox     3.5+, Chrome, Opera, Safari等浏览器
• KO做的事情j比如Query也能做，但是比较麻烦，有很多代码需要写，而且不够直观； AugularJS也能做，但是比较复杂，学习成本较高。

 接下来，我们来了解下如何完成一个KO的页面：

1. 数据

KO提供了灵活的方式支持对JS的对象定义在View Model，然后绑定到HTML元素上，View Model里面的值和 HTML上面的元素相匹配。

1. 声明普通JS 对象来定义View Model对象

varmyViewModel = {
    personName:'Bob',
    personAge: ko.observable(123),
    jobs:ko.observableArray("Engineer", "Tester")
};

varContactsModel = function (contacts) {
       var self = this;
       self.FirstName = "King";
       self.LastName =ko.observable("");
       self.Id = "";
}

Note:

1. 普通的赋值适用于值不变的对象，适用于Lable等
2. Observable代表双向绑定，也就是界面的DOM对象更新，这个JS变量也会跟着更新, 一般的input需要定义成这种对象。
3. ObservableArray对应数组的双向绑定，适用对Checkbox等多选的对象。

 

      b. 声明JSON为View Model对象

   var initialData = [
        {
            firstName: "Danny",lastName: "LaRusso",id:"C6A2D391-6B68-42EA-9EE2-3E25756143C2", phones: [
              { type: "Mobile",number: "(555) 121-2121", id:"C6A2D391-6B68-42EA-9EE2-3E25756143C1" },
              { type: "Home", number:"(555) 123-4567", id:"C6A2D391-6B68-42EA-9EE2-3E25756143C5" }]
        },
        {
            firstName: "Sensei",lastName: "Miyagi", id:"C6A2D391-6B68-42EA-9EE2-3E2575614334", phones: [
              { type: "Mobile",number: "(555) 444-2222", id:"C6A2D391-6B68-42EA-9EE2-3E25756143C20" },
              { type: "Home", number:"(555) 999-1212", id:"C6A2D391-6B67-42EA-9EE2-3E25756143C2" }]
        }
    ];

 
    var ContactsModel = function (contacts) {
        var self = this;
        self.contacts =ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
            return {
               firstName:ko.observable(contact.firstName),
                lastName:ko.observable(contact.lastName),
                id: contact.id,
                phones:ko.observableArray(ko.utils.arrayMap(contact.phones, function (phone) {
                   return {
                        type2:ko.observable(phone.type),
                        number2:ko.observable(phone.number),
                        id: phone.id
                    }
                }))
            };
        }));
}

 

KO提供了Ko.utils类库来支持一些基本的操作，比如ko.utils.arrayMap相当于$.each，可以对数组里面的对象逐个绑，在多层结构的JSON或数据非常有用。这种方式相当于手动绑定JSON对象里面的元素，可以过滤掉不用的，也可以重命名。如果整个JSON都需要用，不需要过滤，而且不需要重命名，可以用KO的Mapping插件，非常方便。一开始不知道有这个Mapping插件，写了很多手动匹配的代码。。。

2. 数据绑定

定义好数据，接下来就是绑定到HTML作用域了。使用applyBindings方法,第一个参数是ViewModel，第二个参数是HTML的节点，这里注意下，如果第二个参数不指定或指定的DOM对象不存在，都会绑定为全局的作用域。 

 ko.applyBindings(newContactsModel(initialData), document.getElementById("contactsList"));

3. HTML  View层

这也是KO的核心部分之一，KO定义了很多常用的Bindings,针对HTML 标签，属性，CSS样式，事件，所有的绑定行为写在Data-bind属性里，也可以写在注释<!-- -->里(这个非常有用）。有了View层的binding, 所有的逻辑都能够很显式的在HTML里找到，enable/disable,visible/invisible, click/textInput, if/ifnot等等，比起jQuery把所有的行为写在js里，HTML完全看不出来有哪些逻辑直观很多。

<divid='contactsList'>
    <table class='contactsEditor'>
       <thead>
            <tr>
                <td>First name</td>
                <td>Last name</td>
                <td>Operation</td>

        </thead>
        <tbodydata-bind="foreach: contacts">  <!-- foreach 绑定-->
           <tr>
                <td><inputdata-bind="value: firstName" class="form-control" />   <!-- value 绑定-->
                </td>
                <td><inputdata-bind='value: lastName' class="form-control" /></td>
                <td>
                    <buttonclass="btn btn-warning" data-toggle="modal"data-target="#updateContact" data-bind="click:$root.updateContactInit.bind(this,firstName,lastName,id)">Update acontact</button>    <!-- click事件绑定-->
                    <buttondata-bind='click: $root.removeContact' class="btnbtn-warning">Delete Contact</button>
                </td>
             </tr>
        </tbody>
    </table>
</div>

 

Binding的使用在KO的官网都有解释 http://knockoutjs.com/documentation/introduction.html， 个人觉得比Tom大叔讲的要明白很多。

Note:

1. click: $root.removeContact, 这个绑定会把当前层的Ko对象作为参数传递给removeContact方法，如果想要传递多个参数，可以使用bind方法，例如$root.updateContactInit.bind(this,firstName,lastName,id)
2. checked绑定对于checkbox非常有用，只需声明个数组 this.checkedList= ko.observableArray(); 然后在HTML绑定时指定value和checked就能实现多选，不需要很复杂的代码：databind="value: Id, checked: checkedList", checkedList取到的就是选中的Id列表。
3. Input标签使用textInput 绑定而不是value， textInput在值改变的时候就能触发， value要等到keydown才行。

 

最后就是KO的一个带2层数据的CRUD例子，官网上的例子是直接在input里修改，实际项目很少这么做，一般都是弹出框修改，所以我把它改成了bootstrap的popupmodel:http://jsbin.com/bahofu/ ,里面的updatePhone方法留给大家思考。

 

Reference:

http://blog.nebithi.com/knockoutjs-vs-angularjs/

http://knockoutjs.com/documentation/introduction.html

http://knockoutjs.com/examples/