文本输入绑定目的

TextInput绑定主要用于输入或textarea元素。他提供了DOM和视图模型的双向更新。与值绑定不同，textinput绑定是实时更新的。

例如：

源代码：

pLogin name:输入数据-绑定=' textinput : userName '/pppassword :输入类型='password '数据-绑定=' textinput : userName '/pviewmodel :

pre data-bind=' text : ko . to JSON($ root，null，2)'/prescriptko . applybindings({ username : ko . observatory(')，//initial blankusepassword : ko . observatory(' ABC ')//pre populate })；/script注意事项1: textinput绑定VS值绑定

虽然值组合也可以将双向文本框与视图模型性能相结合，但博主更喜欢textInput，因为它是实时更新的。值绑定和文本输入绑定的主要区别是：

即时更新

值默认情况下，在用户将焦点从文本框移开之前，您的模型不会更新。每次击键或其他文本输入时，文本输入会立即更新模型。

浏览器的事件处理

不同的浏览器有文本输入机制，如剪切、拖动或接受自动完成建议。不同浏览器的机制不同。值绑定，带有附加选项，例如valueUpdate: afterkeydown，以获取特定事件的更新，但它可能不兼容所有浏览器。

TextInput组合专门用于处理各种浏览器的不同机制，即使在处理不同的文本输入机制时，也能保持一致，直接更新模型。

不要试图使用值和文本输入绑定到同一个元素。

HasFocus绑定目的

HasFocus绑定是视图模型属性和DOM元素之间的焦点状态绑定。它是双向绑定的，所以：

如果您的视图模型属性设置为true或false，则相关元素将变为聚焦或非聚焦。如果用户手动聚焦或不聚焦相关元素，视图模型属性将被设置为真或假。如果您正在构建、编辑动态显示复杂表单的元素，并且您想要控制，用户应该开始键入，或者插入器的响应位置，这非常有用。

例1

在此示例中，当文本框当前具有焦点时，将显示一条消息，并且可以使用一个按钮以编程方式触发焦点。

源代码：

输入数据-bind='hasFocus: isSelected '按钮数据-bind=' click : setis selected ' focus programmable/button span data-bind=' visible : is selected '文本框具有focus/span script var viewModel={ is selected : ko . observatory(false)，setis selected : function(){ this . is selected(true)}；ko.applyBindings(viewModel，document . getelementbyid(' eq2 '))；/script示例2

因为hasFocus绑定是双向绑定，可以让切换“编辑”模式更加方便。

源代码：

pName: b数据绑定='visible:编辑()，text:名称，点击： edit ' input data-bind=' visible : editing，value: name，hasfocus : editing '//ppemclk点击名称进行编辑；单击其他地方应用更改。/em/pscriptfunction PersonViewModel(name){//Datathis . name=ko . observatory(name)；this . editing=ko . observable(false)；//behaviosthis . edit=function(){ this . editing(true)} } ko . applybindings(new PersonViewModel(' Bert Bertington ')，document . getelementbyid(' eq3 '))；/scriptchecked绑定目的

选中绑定主要用于复选框(输入类型='checkbox ')或单选按钮(输入类型='radio ')以及与视图模型属性的绑定。

当用户更改表单控件时，这将更新视图模型属性的值。同样，当您更新视图模型的值时，它将直接反映在窗体控件上。

注意：对于文本框、下拉列表和所有不可检查的表单控件，您需要使用值绑定或文本输入绑定来读写元素的值，而不是检查绑定。

示例1:复选框绑定

源代码：

pSend me spam:输入类型='checkbox '数据-bind=' checked : wantspam '/pscript类型=' text/JavaScript ' var viewModel={ wantspam : ko . observable(true)//initial checked }；//.后来.viewmodel . wantspam(false)；//复选框变为未选中/脚本示例2:带有数组绑定的多个复选框

源代码：

pSend me spam:输入类型='checkbox '数据-bind=' checked : wantspam '/pdiv数据-bind=' visible : wantspam '首选口味spam:divinput类型='checkbox '值='checkbox '数据-bind=' checked : spam flavors '/checked 3: spam flavors/Cherry/divinput类型='checkbox '值='杏仁'数据-bind=' checked 33: spam flavors '/杏仁/div//.后来.viewmodel . spamflavors . push(' msg ')；//现在额外勾选味精复选框/脚本示例3:单选按钮

源代码：

pSend me spam:输入类型='checkbox '数据-bind=' checked : wantspam '/pdiv数据-bind=' visible : wantspam ' spam : divinput的首选口味类型='radio '名称=' flavor '数据-bind=' checked : spa mFlavor '/Cherry/divinput类型='radio '名称='flavorGroup '值='杏仁'数据-bind=' checked 333330//.后来.viewmodel . spamflavor(' msg ')；//现在只检查味精/脚本参数

主要技术参数

KO设置元素的选定状态以匹配您的参数值。任何以前选择的状态都将被覆盖。参数的解释方式取决于绑定元素的类型：

对于复选框，当参数值为真时，KO将元素设置为选中，当参数值为假时，将元素设置为未选中。如果你给出的不是布尔值，KO会松散地解释它。这意味着非零数字、非空对象和非空字符串将被解释为真，而零、空、未定义和空字符串将被解释为假。

当用户选中或取消选中复选框时，将模型属性设置为真或假。

如果您的参数解析为给定数组的数组。在这种情况下，KO将设置为检查DOM中的值属性是否与数组值匹配。如果值匹配，将进行检查，如果不匹配，将不会进行检查。

当用户选中或取消选中该复选框时，KO将更改相应视图模型属性的值。就像例2一样。

对于单选按钮，KO检查视图模型的值是否等于单选按钮的DOM节点的值属性，或者视图模型属性的值是否等于checkedValue参数指定的值。就像例3一样。

当用户更改其单选按钮被选中时，KO会将模型属性值设置为所选单选按钮的值。与示例3一样，单击值为“cherry”的单选按钮会将viewModel.spamFlavor设置为“cherry”。

如果您的参数是监视属性类型，则每当值发生变化时，绑定都会更新元素的选定状态。如果此参数是非监视属性，它将仅在首次运行时设置元素的选定状态，并且不会在以后更新。

其他参数

检查值

checkedValue参数定义该值与选中的绑定结合使用，而不是元素的Value属性。如果您想要的值不是字符串(如整数或对象)，或者如果您想要动态设置该值，这将非常有用。

例如，以下示例：

源代码：

！-ko foreach : items-input type=' checkbox ' data-bind=' checked value : $ data，checked : $ root . chosenitems '/span data-bind=' text : item name '/span！-/ko-script type=' text/JavaScript ' var viewModel={ items : ko . observablearray([{ itemname : ' Choice 1 ' }，{ itemName: 'Choice 2' }])，chosenitems : ko . observablearray()}；/script如果您的checkedValue参数是一个监视属性，当值改变并且元素被选中时，绑定将更新选中的模型属性。对于复选框，它从数组中删除旧值并添加新值。对于单选按钮，它只更新模型值。

以上是第三章第四章中检查的textInput、hasFocus的绑定。边肖引进的原料药。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！