knockout简单实用教程2

在上一篇文章中简单了介绍了下什么ko(后文中都已ko来代替knockout.js)和一些简单的ko的使用方法下面我将介绍在实际的项目中常用到的几种绑定方式和方法.

在开始之前先拿一个dome来回顾下ko的绑定方式吧。废话不多说上代码。

var BetterListModel = function () {    this.itemToAdd = ko.observable("");    this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]); // 初始化数据    this.selectedItems = ko.observableArray(["Ham"]);                                // 初始化选定项     this.addItem = function () {        if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0)) // 判断不为空并且不存在重复的数据            this.allItems.push(this.itemToAdd());        this.itemToAdd(""); // 清空文本框内容绑定    };     this.removeSelected = function () {        this.allItems.removeAll(this.selectedItems());        this.selectedItems([]); //清空集合    };     this.sortItems = function() {        this.allItems.sort();    };}; ko.applyBindings(new BetterListModel());

简单说明下。创建了一个对象模型。里面有一些简单属性和复杂属性，还有一个行为事件（以面向对象来理解会很简单) 如果看过之前的文章在看这个相信会一目了然.

下面给出dom的绑定

<form data-bind="submit:addItem">    Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button></form> <p>Your values:</p><select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select> <div>    <button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>    <button data-bind="click: sortItems, enable: allItems().length > 1">Sort</button></div>

照例也给出调试的地址http://jsfiddle.net/rniemeyer/aDahT/

上面的内容呢主要还是用来回顾之前的东西。下面开始本节的内容。先从表单的绑定说起吧。先直接给出来表单模型的定义代码

var viewModel = {    stringValue : ko.observable("Hello"),    passWordValue : ko.observable("mypass"),    booleanValue : ko.observable(true),    optionValues : ["Alpha", "Beta", "Gamma"],    selectedOptionValue : ko.observable("Gamma"),    multipleSelectedOptionValues : ko.observable(["Alpha"]),    radioSelectedOptionValue : ko.observable("Beta")};ko.applyBindings(viewModel);

上面的模型定了基本都是定一些了些属性和一些默认值，当然你也可以动态的从后台拿到这个数据,然后直接更新对象的模型属性即可，像这样 viewModel.optionValues(youdata)

下面继续说前台的绑定,这里先直接给出绑定的代码。

<div class="readout">    <h3>What's in the model?</h3>    <table>        <tr>            <td class="label">Text value:</td>            <td data-bind="text: stringValue"></td>        </tr>        <tr>            <td class="label">Password:</td>            <td data-bind="text: passwordValue"></td>        </tr>        <tr>            <td class="label">Bool value:</td>            <td data-bind='text: booleanValue() ? "True" : "False"'></td>        </tr>        <tr>            <td class="label">Selected option:</td>            <td data-bind="text: selectedOptionValue"></td>        </tr>        <tr>            <td class="label">Multi-selected options:</td>            <td data-bind="text: multipleSelectedOptionValues"></td>        </tr>        <tr>            <td class="label">Radio button selection:</td>            <td data-bind="text: radioSelectedOptionValue"></td>        </tr>    </table></div> <h3>HTML controls</h3><table>    <tr>        <td class="label">Text value (updates on change):</td>        <td><input data-bind="value: stringValue" /></td>    </tr>    <tr>        <td class="label">Text value (updates on keystroke):</td>        <td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>    </tr>    <tr>        <td class="label">Text value (multi-line):</td>        <td><textarea data-bind="value: stringValue"> </textarea></td>    </tr>    <tr>        <td class="label">Password:</td>        <td><input type="password" data-bind="value: passwordValue" /></td>    </tr>    <tr>        <td class="label">Checkbox:</td>        <td><input type="checkbox" data-bind="checked: booleanValue" /></td>    </tr>    <tr>        <td class="label">Drop-down list:</td>        <td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>    </tr>    <tr>        <td class="label">Multi-select drop-down list:</td>        <td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>    </tr>    <tr>        <td class="label">Radio buttons:</td>        <td>            <label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>            <label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>            <label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>        </td>    </tr></table>

调试的地址为http://jsfiddle.net/rniemeyer/ZbrB7/

在这我就详细说明下具体的绑定到底是什么代表什么意思。其实大家应该从字面上都可以简单的看出来这些绑定是干什么的。但是为了让初学者看的更明白些，我还是准备说明一下。

1:data-bind="text:你要绑定的字段名称" //这里绑定是指的显示的文本信息的绑定.

2:data-bind="value:你要绑定的字段名称"//文本框值的绑定.

3:data-bind="checked:true或者false或者是表达式"//这个绑定是针对单选和多选框的绑定方法。用来指明是否被选中.

4:data-bind="options:选项的集合,selectedOptions:默认选中的值"//绑定select的options ,selectedOptions用来指定默认选中的值.

上面的4种绑定方式呢，是比较常用的表单元素的绑定，PS:(如果你需要用表达式动态绑定的时候,你需要在要判断的元素后面加上小括号).在这里我提一个问题。如果需要通过一个判定字段来判断后面的内容是否绑定要怎么做？这里我先卖个关子，你们可以先思考下，后面我会给出说明,如果在后面的dome中如果出现新的绑定方式我会再次说明.

    <td data-bind='text: booleanValue() ? "True" : "False"'></td>

下面继续介绍如何绑定数据集合的绑定。也顺便引出新的绑定方式foreach绑定。

// 定义一个人的对象。这个对象有两个字段 一个是名字一个是子节点 默认有两个构造函数的参数.var Person = function(name, children) {    this.name = name;    this.children = ko.observableArray(children);     this.addChild = function() {        this.children.push("New child");    }.bind(this);} // 在定义一个页面UI的模型对象，模型对象people里面放入person集合var viewModel = {    people: [        new Person("Annabelle", ["Arnie", "Anders", "Apple"]),        new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),        new Person("Charles", ["Cayenne", "Cleopatra"])        ],    showRenderTimes: ko.observable(false)}; ko.applyBindings(viewModel);

这里直接给出dom绑定下面在说明

<h2>People</h2><ul data-bind="foreach: people">    <li>        <div>            <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:            <a href='#' data-bind='click: addChild '>Add child</a>            <span class='renderTime' data-bind='visible: $root.showRenderTimes'>                (person rendered at <span data-bind='text: new Date().getSeconds()' > </span>)            </span>        </div>        <ul data-bind="foreach: children">            <li>                <span data-bind="text: $data"> </span>                <span class='renderTime' data-bind='visible: $root.showRenderTimes'>                    (child rendered at <span data-bind='text: new Date().getSeconds()' > </span>)                </span>            </li>        </ul>    </li></ul><label><input data-bind='checked: showRenderTimes' type='checkbox' /> Show render times</label> 

调试的 地址是http://jsfiddle.net/rniemeyer/GSvnh/

这里的data-bind="foreach:你要循环的集合"//在foreach包裹的区域内。你可以绑定对应的单个对象的具体字段内容。如果里面里面的某一个字段是一个集合你还可以继续嵌套循环来绑定数据如上,PS（ 这里顺便说一嘴。就是说如果你需要在子循环里面,绑定父循环的数据你需要像这样来绑定,$.parent.父节点字段) 上面代表中出现的$.data就代表当前的绑定对象本身,而$.r