IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

Knockout学习之表单绑定器(下)

作者:y-z-f  发布日期:2014-07-02 20:05:54
  • 收藏本文    我要投稿
  • “hasFocus”绑定

    hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点。

     

    比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本:

     1 <div>
     2     <input type='text' data-bind='hasfocus: focusState' />
     3     <button type='button' data-bind='click:setFocus' >set focus</button>
     4     <span data-bind='visible:focusState' >the text box has focus</span>
     5 </div>
     6 
     7 
     8     <script type='text/javascript'>
     9 
    10         var appViewModel = function () {
    11             var self = this;
    12             this.focusState = ko.observable(false);
    13             this.setFocus = function () {
    14                 self.focusState(true);
    15             };
    16         }
    17 
    18         ko.applyBindings(new appViewModel());
    19     </script>

     

    “checked”绑定

    “checked”绑定器用来关联checkable表单控件,比如复选框和单选框。

     

    比如下面的列子可以判断用户是否勾选了这个复选框:

     1 <div>
     2     <input type='checkbox' data-bind='checked: isChecked' />
     3 </div>
     4 <div>
     5     <button type='button' data-bind='click:setFocus'>勾选</button>
     6 </div>
     7 
     8 
     9     <script type='text/javascript'>
    10 
    11         var appViewModel = function () {
    12             var self = this;
    13             this.isChecked = ko.observable(false);
    14             this.setFocus = function () {
    15                 self.isChecked(true);
    16             };
    17         }
    18 
    19         ko.applyBindings(new appViewModel());
    20     </script>

     

     

    再复杂些就是可以将用户勾选的值组成数组,比如下面的例子:

     1 <div>
     2     <input type='checkbox' value='a' data-bind='checked: CheckArray' />
     3     <input type='checkbox' value='b' data-bind='checked:CheckArray' />
     4     <input type='checkbox' value='c' data-bind='checked:CheckArray' />
     5 </div>
     6 <div>
     7     <button type='button' data-bind='click:showChecked'>show checked</button>
     8 </div>
     9 
    10 
    11     <script type='text/javascript'>
    12 
    13         var appViewModel = function () {
    14             var self = this;
    15             this.CheckArray = ko.observableArray(['a','b']);
    16             this.showChecked = function () {
    17                 alert(self.CheckArray().toString());
    18             };
    19         }
    20 
    21         ko.applyBindings(new appViewModel());
    22     </script>

     

     

    当然不仅仅只有复选,在单选的情况下只会将选择的元素的value值更新到视图模型中去,比如下面的例子所示:

     1 <div>
     2     <input type='radio' name='1' value='a' data-bind='checked: CheckEle' />
     3     <input type='radio' name='1' value='b' data-bind='checked: CheckEle' />
     4     <input type='radio' name='1' value='c' data-bind='checked: CheckEle' />
     5 </div>
     6 <div>
     7     <button type='button' data-bind='click:showChecked'>show checked</button>
     8 </div>
     9 
    10 
    11     <script type='text/javascript'>
    12 
    13         var appViewModel = function () {
    14             var self = this;
    15             this.CheckEle = ko.observable('a');
    16             this.showChecked = function () {
    17                 alert(self.CheckEle());
    18             };
    19         }
    20 
    21         ko.applyBindings(new appViewModel());
    22     </script>

     

     

    如果你不想用value那个值,可以加上checkedValue属性,这样更新到视图模型中的值就是checkedValue指定的值。比如下面这样:

    1 <div>
    2     <input type='radio' name='1' value='a' data-bind='checkedValue:'s', checked: CheckEle' />
    3     <input type='radio' name='1' value='b' data-bind='checkedValue: 'd', checked: CheckEle' />
    4     <input type='radio' name='1' value='c' data-bind='checkedValue: 'e', checked: CheckEle' />
    5 </div>
    6 <div>
    7     <button type='button' data-bind='click:showChecked'>show checked</button>
    8 </div>

     

     

    “options”绑定

    “options”绑定器控制在下拉列表中显示的项,比如<select>单选或者<select size=’6’ >多选,但是该绑定器不能在除了<select>标签使用。

    指定关联的值必须是一个数组或者监控数组,ko会将这些数组中的项作为<select>的option显示。

     

    比如下面的例子,会将数组中的值全部显示,同时我们还可以在此之后增加新的值到数组中,ko一样会更新:

     1 <div>
     2     <select data-bind='options:dropOptions' ></select>
     3 </div>
     4 <div>
     5     <input type='text' data-bind='value:newOption' />
     6     <button type='button' data-bind='click: addNewOptions'>add new item</button>
     7 </div>
     8 
     9 
    10     <script type='text/javascript'>
    11 
    12         var appViewModel = function () {
    13             var self = this;
    14             this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']);
    15             this.newOption = ko.observable();
    16             this.addNewOptions = function () {
    17                 self.dropOptions.push(self.newOption());
    18                 self.newOption('');
    19             }
    20         }
    21 
    22         ko.applyBindings(new appViewModel());
    23     </script>

     

     

    当然对于多选也一样可以应付:

    1 <div>
    2     <select size='3' multiple='multiple' data-bind='options:dropOptions' ></select>
    3 </div>

     

     

    当然一定会有人问如何获取选择的项,这里我们可以用value绑定器,比如下面的代码将第一个例子改写,能够显示选择的值:

     1 <div>
     2     <select data-bind='options:dropOptions,value:selectedOption' ></select>
     3 </div>
     4 <div>
     5     <input type='text' data-bind='value:newOption' />
     6     <button type='button' data-bind='click: addNewOptions'>add new item</button>
     7     <button type='button' data-bind='click: showSelectOption'>show selected value</button>
     8 </div>
     9 
    10 
    11     <script type='text/javascript'>
    12 
    13         var appViewModel = function () {
    14             var self = this;
    15             this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']);
    16             this.newOption = ko.observable();
    17             this.selectedOption = ko.observable();
    18             this.addNewOptions = function () {
    19                 self.dropOptions.push(self.newOption());
    20                 self.newOption('');
    21             },
    22             this.showSelectOption = function () {
    23                 alert(self.selectedOption());
    24             }
    25         }
    26 
    27         ko.applyBindings(new appViewModel());
    28     </script>

     

     

    如果是多选我们可以将value关联的属性改成监控数组,那么就可以解决这个问题了,但是上面仅仅只是简单的数组,实际的开发过程中可能是一个对象组成的数组,而我们也要将其显示到下拉中,当然options绑定一样可以办到,比如下面的例子:

     1 <div>
     2     <select data-bind='options:dropOptions,value:selectedOption,optionsCaption:'choose...',optionsText:'text',optionsValue:'value'' ></select>
     3 </div>
     4 <div>
     5     <button type='button' data-bind='click: showSelectOption'>show selected value</button>
     6 </div>
     7 
     8 
     9     <script type='text/javascript'>
    10         var ObjectArray = function (text, value) {
    11             this.text = text;
    12             this.value = value;
    13         }
    14 
    15         var appViewModel = function () {
    16             var self = this;
    17             this.dropOptions = ko.observableArray([new ObjectArray('a', 1), new ObjectArray('b', 2), new ObjectArray('c', 1)]);
    18             this.selectedOption = ko.observable();
    19             this.showSelectOption = function () {
    20                 alert(self.selectedOption());
    21             }
    22         }
    23 
    24         ko.applyBindings(new appViewModel());
    25     </script>

     

     

    这里我们通过optionsCaption是用来显示提示的,optionsText是用来指定用于作为下拉显示的属性名称,这里我们指定的是text,而optionsValue则是指定用于作为value的属性名称,我们指定的是value,那么当我们选择一项之后,点击显示,则显示的是value的值而不是text的值,当然optionsText也可以传给它一个函数,那么ko会将数组中的当前项作为第一个参数传递给这个函数,当然这个函数也要返回用于显示的文字。

     

    还有一些其他参数如下:

    optionsIncludeDestroyed:是否显示数组中已经会设置为删除标记的项,默认是不显示的。

    optionsAfterRender:当一个项显示之后调用该函数,可以同来执行一些自定义的方法。

    selectedOptions:用于多选的情况,用来关联选择的项。关联到视图模型中的属性类型需要为数组,并且在通过push和pop操作该数组的同时,下拉中选择的项也会跟着变动。

    valueAllowUnset:当你指定的value不存在于下拉项中的时候,下拉将显示空白,如果未设置该属性为true则会将value关联的属性设置为undefined,同时下拉会显示optionCaption指定的字符串。

     

    “uniqueName”绑定

    这个绑定器很简单,就是用来给name属性生成一个标识符。

     

Tag标签:表单  
  • 专题推荐