你的位置:首页 > Java教程

[Java教程]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 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不仅支持样式绑定,还支持事件绑定,将数据作为核心,我们只需要关注数据的变化和数据的逻辑操作,这大大提高了我们的开发效率。