knockoutJS学习笔记08：表单域绑定

　　前面的绑定都是用在基本标签上，这章主要讲表单域标签的绑定。

一、value 绑定

　　绑定标签：input text、textarea。

    <p>用户名：<input type="text" data-bind="value:name" /><span data-bind="text:name"></span></p>
    <p>密码：<input type="text" data-bind="value:password" /><span data-bind="text:password"></span></p>
    function UserInfo(){
        var self = this;
        self.name = ko.observable("tom");
        self.password = ko.observable("123456");
    }
    var userInfo = new UserInfo();
    ko.applyBindings(userInfo);

　　关于value还有一个参数:valueUpdate，用于设置触发绑定的时机。支持以下值：　　

　　“change”（默认值） - 当失去焦点的时候更新view model的值，或者是<select> 元素被选择的时候。

      “keyup” – 当用户敲完一个字符以后立即更新view model。

      “keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup，这个更新和keydown是一样的。

      “afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。

      上述这些选项，如果你想让你的view model进行实时更新，使用“afterkeydown”是最好的选择。

　　例如，我可以将上面的用户名编辑框改为：<input type="text" data-bind="value:name,valueUpdate:'afterKeydown'"/> 这样就可以实时更新了。

二、options 绑定

　　绑定标签：select。

　　例1：options指定项集。

<select data-bind="options:items"></select>
var items = ["item1","item2","item3"];
ko.applyBindings(items);

//添加新项
items.push("item4");

　　例2：optionsText：指定要显示的属性的名称；optionsCaption：初始选项；value：被选中的项。

    <select data-bind="options:items,optionsText:'name',optionsCaption:'请选择...',value:selectedValue"></select>
    <div data-bind="text:selectedValue() ? selectedValue().name : '未选择'"></div>
    var data = {
        items:ko.observableArray([{name:"中国",rank:1},{name:"美国",rank:2},{name:"俄罗斯",rank:3}]),
        selectedValue:ko.observable()        
    }
    ko.applyBindings(data);

三、selectedOptions 绑定

　　绑定标签：multiple select

    <select data-bind="options:items,selectedOptions:selectedItems" multiple="multiple" size="5"></select>
    <div data-bind="text:selectedItems().join(',')"></div>
    var data = {
        items:ko.observableArray(["中国","美国","俄罗斯"]),
        selectedItems : ko.observableArray(["中国"])     
    }
    ko.applyBindings(data);

 　　selectedOptions表示选中的项。selectedOptions不仅可以支持字符串，还可以像options一样支持对象类型。

四、checked 绑定

　　绑定标签：radio、checkbox。

　　例1，相同checked属性的radio为一个组。

    <input type="radio" value="basketball" data-bind="checked:sport"/>篮球
    <input type="radio" value="football" data-bind="checked:sport"/>足球
    <input type="radio" value="running" data-bind="checked:sport"/>跑步
    <p>您的选择：<span data-bind="text:getSport()"</p>
    var data = {
        sport:ko.observable("basketball"),
        getSport:function(){
            switch(data.sport()){
                case "basketball":
                    return "篮球";
                case "football":
                    return "足球";
                case "running":
                    return "跑步";
                default:
                    return "暂无";
            }
        }
    }
    ko.applyBindings(data);

 　　例2：checked可以多选，所以用observableArray。　　

    <input type="checkbox" value="basketball" data-bind="checked:sport"/>篮球
    <input type="checkbox" value="football" data-bind="checked:sport"/>足球
    <input type="checkbox" value="running" data-bind="checked:sport"/>跑步
    <p>您的选择：<span data-bind="text:getSport()"</p>
    var data = {
        sport:ko.observableArray(["basketball","football","running"]),
        getSport:function(){
                var sports = data.sport();
                if(!sports){
                    return "暂无";
                }
                return sports.join(",");            
        }
    }
    ko.applyBindings(data);

五、enable 绑定/disable 绑定

　　根据结果设置input 的 disabled 属性。这两个的作用是一样的。

    <input type="text" data-bind="enable:isEnabled" /><br />
    <input type="button" value="Test" data-bind="disable:isDisabled" />

六、hasfocus 绑定

　　结果为true时获得焦点。input text用得比较多。

七、click 和 submit 绑定

　　绑定点击事件和提交事件。

　　例1：函数第一个参数就是事件对象。

    <input type="button" value="click" data-bind="click:btnClick" />
    var data = {
        btnClick:function(event){
            console.log(event);
        }
    }
    ko.applyBindings(data);

 　　例2：取消事件冒泡，通过绑定 cancelBubble:false 就可以取消事件冒泡。

    <div data-bind="click:btnClick">
        <input type="button" value="click" data-bind="click:btnClick,clickBubble:false" />
    </div>

　　例3：也可以在绑定事件里，传递参数到执行函数，最简单的方式就是用一个匿名函数包装一下。

    <div data-bind="click:btnClick">
        <input type="button" value="click" data-bind="click:function(){btnClick('参数1','参数2');}" />
    </div>　　

　　例4：submit 绑定在form标签上，只有绑定函数return ture时，才会提交表单。而为什么表单用submit绑定而不用普通的click绑定？因为表单绑定有更多的操作，例如按下enter键触发提交操作。

    <form action="Default.aspx" data-bind="submit:submitForm">
        <input type="text" name="name" />
        <input type="submit"/>
    </form>
    var data = {
        submitForm:function(){
            return true;
        }
    }

八、event 绑定

　　除了点击事件，ko还支持其它事件的绑定。例如：keypress、mouseover、mouseout等。

    <div style="100px;height:100px;background:red;" data-bind="event:{mouseover:divMouseOver,mouseout:divMouseLeave}"></div>
    <div data-bind="text:status"></div>
    var data = {
        divMouseOver:function(event){
            this.status("over");
        },
        divMouseLeave:function(event){
            this.status("out");
        },
        status:ko.observable("未开始")
    }
    ko.applyBindings(data);

九、总结

　　ko不仅支持样式绑定，还支持事件绑定，将数据作为核心，我们只需要关注数据的变化和数据的逻辑操作，这大大提高了我们的开发效率。