"hasfocus" 绑定

hasfocus绑定用于联系一个dom元素的焦点状态，一般常用的是文本框。也是双向绑定的。

当绑定到DOM元素的参数值为 true 时，元素获得焦点。当绑定到DOM元素的参数值为 false时，元素失去焦点。

相反，当dom元素获得焦点时，绑定的参数值也会同步更新为true 。当dom元素失去焦点时，绑定的参数值也会同步更新为false。

demo

Html代码

<input data-bind="hasfocus: isSelected" />
<button data-bind="click: setIsSelected">Focus programmatically</button>
<span data-bind="visible: isSelected">The textbox has focus</span>

var viewModel = {
   isSelected: ko.observable(false),
   setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel);

"checked" 绑定

checked 绑定是关联form表单控件到view model上， 例如checkbox (<input type='checkbox'>) 或者radio button (<input type='radio'>) 。

当控件元素的选中状态改变时，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。即绑定是双向的。

基本用法

Html代码

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>

var viewModel = {
    wantsSpam: ko.observable(true) // 初始为选中状态
};
viewModel.wantsSpam(false); // 设为未选中状态
ko.applyBindings(viewModel);

绑定关联到数组上

一个特殊情况是绑定的参数是一个数组时，如果控件元素的值存在于数组中，KO就会将该元素设置为"选中"状态，如果数组里不存在，就设置为 "未选中"状态。

Html代码

<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>

var viewModel = {
   spamFlavors: ko.observableArray(["cherry","almond"]) //初始时，只有俩个checkbox为选中状态
};
viewModel.spamFlavors.push("msg"); //将第三个checkbox也设为选中状态
ko.applyBindings(viewModel);

绑定关联到radio

对于 radio，只有当参数值等于radio 的value 属性值的时才设置元素为checked 

Html代码

<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>

var viewModel = {
       wantsSpam: ko.observable(true),
	   spamFlavor: ko.observable("almond") // 初始时，将value="almond"的radio设为选中状态
   };
   viewModel.spamFlavor("msg"); // 改变radio组的状态，将value="msg"的radio设为选中状态。
   ko.applyBindings(viewModel);