标签：des style blog java color 使用
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”绑定器用来关联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”绑定器控制在下拉列表中显示的项，比如<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指定的字符串。
这个绑定器很简单，就是用来给name属性生成一个标识符。
Knockout学习之表单绑定器（下）,布布扣,bubuko.com
标签：des style blog java color 使用
原文地址：http://www.cnblogs.com/yaozhenfa/p/knockout_7.html
