你的位置:首页 > Java教程

[Java教程]【Knockout】三、data


1.visible绑定

<div id="myview" data-bind="visible : isVisible">    visible bind</div>

<script>    var viewModel = {      isVisible : ko.observable(true)    };    viewModel.isVisible(false);    var el = document.getElementById('myview');    ko.applyBindings(viewModel,el);  </script>

2.text绑定

<div id="myview" data-bind="text : name">    visible bind</div>

<script>  var viewModel = {    name : ko.observable("knockout")  };  var el = document.getElementById('myview');  ko.applyBindings(viewModel,el);</script>

3.html绑定

<div id="myview" data-bind="html : htmlContent"></div>

<script>  var viewModel = {    htmlContent : ko.observable("<i>html bind</i>")  };  var el = document.getElementById('myview');  ko.applyBindings(viewModel,el);</script>

4.CSS绑定

  <div id="myview" data-bind="css : {redbg : testValue() < 0}">    css bind  </div>

  <script>    var viewModel = {      testValue : ko.observable(-1)    };    var el = document.getElementById('myview');    ko.applyBindings(viewModel,el);  </script>

view会随着监控属性的变化自动添加或者删除元素上的CSS class。

5.style绑定

  <div id="myview" data-bind="style : {color : testValue() < 0 ? 'red' : 'blue'}">    css bind  </div>

  <script>    var viewModel = {      testValue : ko.observable(1)    };    var el = document.getElementById('myview');    ko.applyBindings(viewModel,el);  </script>

view会随着监控属性的变化自动添加或者删除该元素的style值。

6.attr绑定

  <div id="myview" data-bind="attr : {title : titleName}">  </div>

  <script>    var viewModel = {      titleName : ko.observable("attr bind")    };    var el = document.getElementById('myview');    ko.applyBindings(viewModel,el);  </script>

7.click绑定

  <div data-bind="text : clickCount">  </div>  <button data-bind="click : clickFunc">click me</button>

  <script>    var viewModel = {      clickCount : ko.observable(0),      clickFunc : function(){        var value = this.clickCount();        this.clickCount(value+1);      }    };    ko.applyBindings(viewModel);  </script>

注意:

      (1)默认情况下,knockout会阻止默认事件的执行,例如,当你点击一个a元素,它在执行完viewModel的自定义事件后不会连接到href地址。如果想继续执行默认事件,可在click的自定义函数里返回true。

      (2)默认情况下,knockout允许click事件继续往更高层的事件句柄上冒泡执行,例如:

  <div data-bind="click : clickDiv">    <button data-bind="click : clickButton,clickBubble : false">click</button>  </div>  <script>    var viewModel = {      clickDiv : function(){        alert('click div');      },      clickButton : function(){        alert('click button');      }    };    ko.applyBindings(viewModel);  </script>

一旦设置了clickBubble为false时,则会阻止冒泡。

8.event绑定

  <div data-bind="event : {mouseover : show,mouseout : hide}">    mouse over me  </div>  <div data-bind="visible : isVisible">    mouse over bind  </div>  <script>    var viewModel = {      isVisible : ko.observable(false),      show :function(){        this.isVisible(true);      },      hide : function(){        this.isVisible(false);      }    };    ko.applyBindings(viewModel);  </script>

注意:event绑定也和click绑定一样,默认情况下,knockout会阻止默认事件的执行,在自定义函数里返回true可继续执行默认事件,knockout同样会允许事件冒泡,设置mouseoverBubble为false可阻止事件冒泡,其他事件类似。

 9.submit绑定

knockout会吧整个form表单元素传递到自定义函数中

  <form data-bind="submit : submitHandle">    form bind..........    <button type="submit">submit</button>  </form>  <script>    var viewModel = {      submitHandle : function(formElement){        //to do...      }    };    ko.applyBindings(viewModel);  </script>

注意:默认情况下,knockout会阻止form表单的默认submit动作,即浏览器不会提交表单到服务器,而是只会执行你的submit句柄,如果想继续执行form表单的submit操作,可在句柄里返回true。

10.enable、disable绑定

enable、disabled绑定使DOM元素只有在参数值为 true的时候才enabled、disabled。

11.value绑定

关联dom元素的值到viewModel上。

例如:用户在编辑表单控件的时候,viewModel属性会自动更新,同样viewModel的属性更新的时候,页面上的值也会随之更新。

  <input data-bind="value : name">  <script>    var viewModel = {      name : ko.observable("123")    };    ko.applyBindings(viewModel);  </script>

valueUpdate参数:

  "change"(默认值) : 失去焦点或者select元素被选中的时候更新viewModel;

  "keyup" : 用户在敲完一个字符后立即更新viewModel;

  "keypress" : 按下键盘时开始更新viewModel;

  "afterkeydown" : 用户开始输入字符时就开始更新viewModel;

例如

<input data-bind="value : name,'valueUpdate' : keyup">

注意:knockout对下拉菜单drop-down list(如select)做value绑定时,这个值可以是任意js对象,而不必非是字符串。

12.checked绑定

checked绑定时关联到checkbox(<input type="checkbox">)或者radio button(<input type="radio">);

  <input type="checkbox" data-bind="checked : isCheck">  <script>    var viewModel = {      isCheck : ko.observable(true)    };    ko.applyBindings(viewModel);  </script>

checkbox 关联到数组:

当参数是一个数组的时候,如果元素的值(value)存在于数组,ko将设置元素为checked,否则设置为unchecked,反之,如果用户对元素进行checked或者unchecked,KO就会将元素的值添加进数组或者从数组中删除。

  <div>    <input type="checkbox" value="one" data-bind="checked : isCheck">  </div>  <div>    <input type="checkbox" value="two" data-bind="checked : isCheck">  </div>  <div>    <input type="checkbox" value="three" data-bind="checked : isCheck">  </div>  <script>    var viewModel = {      isCheck : ko.observableArray(["one","two"])    };    ko.applyBindings(viewModel);  </script>

radio:

  <div>    <input type="radio" name="group" value="one" data-bind="checked : isCheck">  </div>  <div>    <input type="radio" name="group" value="two" data-bind="checked : isCheck">  </div>  <div>    <input type="radio" name="group" value="three" data-bind="checked : isCheck">  </div>  <script>    var viewModel = {      isCheck : ko.observable("three")    };    ko.applyBindings(viewModel);  </script>

 13.options绑定

options绑定控制什么样的options在drop-down列表里(如select或者multi-select),并且不能用于select之外的元素,关联的数据时数组(observable数组);

  <select data-bind="options : name"></select>  <script>    var viewModel = {      name : ko.observableArray(['tom','jim','jack'])    };    ko.applyBindings(viewModel);  </script>

注意:如果想要设置或者获取select列表的值应用value绑定,对于multi-select用selectedOptions绑定。

drop-down列表里可以是任意的javascript对象,不仅是字符串:

  <select data-bind="options : persons,optionsText : function(item){  return item.name + ' age : ' + item.age},value : selectedPerson,optionsCaption : 'choosen...'"></select>

  <script>    var Person = function(name,age){      this.name = name;      this.age = age;    };    var viewModel = {      persons : ko.observableArray([          new Person('Tom',23),          new Person('jerry',24),          new Person('jack',25),          new Person('james',26)      ]),      selectedPerson : ko.observable()    };    ko.applyBindings(viewModel);  </script>

该参数是一个observa数组,对于每一个item,ko都会将它们作为一个option添加到select里,之前的options都会被删除。

参数:

    optionsCaption:drop-down列表里默认选择的项目,它的值是字符串类型的,value为undefined。

    例如:

<select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>

   如果myChosenValue为undefined,那么默认项就会被选中。

    optionsText : drop-dwon列表里显示的文本;

    optionsValue : 和optionsText类似, 你也可以通过额外参数optionsValue来声明对象的那个属性值作为该<option>的value值。

        经典场景:如在更新options的时候想保留原来的已经选择的项。例如,当你重复多次调用Ajax获取car列表的时候,你要确保已经选择的某个car一直都是被选择上,那你就需要设置optionsValue为“carId”或者其它的unique标示符,否则的话KO找不知道

    之前选择的car是新options里的哪一项。