Kncokout之绑定事件三

1 value 绑定
目的
value 绑定是关联 DOM 元素的值到 view model 的属性上。主要是用在表单控件 <input>，<select>和<textarea>上。
当用户编辑表单控件的时候， view model 对应的属性值会自动更新。同样，当 你更新 view model 属性的时候，相对应的元素值在页面上也会自动更新。
注：如果你在 checkbox 或者 radio button 上使用 checked 绑定来读取或者写入 元素的 checked 状态，而不是 value 值的绑定。

例子
<p>Login name: <input data-bind="value: userName"/></p> <p>Password: <input type="password" data-bind="value: userPassword"/></p>

<script type="text/javascript"> var viewModel = { userName: ko.observable(""), // Initially blank userPassword: ko.observable("abc"), // Prepopulate
}; </script>

参数
主参数
KO 设置此参数为元素的 value 值。之前的值将被覆盖。
如果参数是监控属性 observable 的，那元素的 value 值将根据参数值的 变化而更新，如果不是，那元素的 value 值将只设置一次并且以后不在更新。
如果你提供的参数不是一个数字或者字符串（而是对象或者数组）的话， 那显示的 value 值就是 yourParameter.toString() 的内容（通常没用，所以最 好都设置为数字或者字符串）。
不管什么时候，只要你更新了元素的值，那 KO 都会将 view model 对应 的属性值自动更新。默认情况下当用户离开焦点（例如 onchange 事件）的时候， KO 才更新这个值，但是你可以通过第 2 个参数 valueUpdate 来特别指定改变值 的时机

 

其它参数
valueUpdate
如果你使用 valueUpdate 参数，那就是意味着 KO 将使用自定义 的事件而不是默认的离开焦点事件。下面是一些最常用的选项：
“change”（默认值） - 当失去焦点的时候更新 view model 的值，或者是<select> 元素被选择的时候。
“keyup” – 当用户敲完一个字符以后立即更新 view model。
“keypress” – 当用户正在敲一个字符但没有释放 键盘的时候就立即更新 view model。不像 keyup，这个更新和 keydown 是一样 的。
“afterkeydown” – 当用户开始输入字符的时候就 更新 view model。主要是捕获浏览器的 keydown 事件或异步 handle 事件。
上述这些选项，如果你想让你的 view model 进行实时更新，使 用“afterkeydown”是最好的选择。

例子：
<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p> <p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->

<script type="text/javascript"> var viewModel = { someValue: ko.observable("edit me") }; </script>

 

 

 

 

 

 

 

 

 

 

 

 

2 checked 绑定
目的
checked 绑定是关联到 checkable 的 form 表单控件到 view model 上 - 例如 checkbox（<input type='checkbox'>）或者 radio button（<input type='radio'>） 。当用户 check 关联的 form 表单控件的时候，view model 对 应的值也会自动更新，相反，如果 view model 的值改变了，那控件元素的 check/uncheck 状态也会跟着改变。
注：对 text box，drop-down list 和所有 non-checkable 的 form 表单控件，用 value 绑定来读取和写入是该元素的值，而不是 checked 绑定。
例子
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p>

<script type="text/javascript"> var viewModel = { wantsSpam: ko.observable(true) // Initially checked };

// ... then later ... viewModel.wantsSpam(false); // The checkbox becomes unchecked </script>

Checkbox 关联到数组
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p> <div data-bind="visible: wantsSpam"> Preferred flavors of spam: <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> </div>

<script type="text/javascript">

var viewModel = { wantsSpam: ko.observable(true), spamFlavors: ko.observableArray(["cherry", "almond"]) // Initially checks the Cherry and Almond checkboxes };

// ... then later ... viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox </script>

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

<div data-bind="visible: wantsSpam"> Preferred flavor of spam: <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> </div>

<script type="text/javascript">

var viewModel = { wantsSpam: ko.observable(true), spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button };

// ... then later ... viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked </script>

参数
主参数
KO 会设置元素的 checked 状态匹配到你的参数上，之前的值将被覆盖。 对参数的解析取决于你元素的类型：
对于 checkbox，当参数为 true 的时候，KO 会设置元素的状态 为 checked，反正设置为 unchecked。如果你传的参数不是布尔值，那 KO 将会 解析成布尔值。也就是说非 0 值和非 null 对象，非空字符串将被解析成 true， 其它值都被解析成 false。
当用户check 或者uncheck 这个 checkbox的时候，KO会将 view model 的属性值相应地设置为 true 或者 false。
一个特殊情况是参数是一个数组，如果元素的值存在于数组， KO 就会将元素设置为 checked，如果数组里不存在，就设置为 unchecked。如果 用户对 checkbox 进行 check 或 uncheck，KO 就会将元素的值添加数组或者从数 组里删除。
对于 radio buttons，KO 只有当参数值等于 radio button value 属性值的时候才设置元素为 checked 状态。所以参数应是字符串。在上面的例子 里只有当 view model 的 spamFlavor 属性等于“almond”的时候，该 radio button 才会设置为 checked。
当用户将一个 radio button 选择上的时候 is selected，KO 会将该元素的 value 属性值更新到 view model 属性里。上面的例子，当点击 value= “cherry”的选项上， viewModel.spamFlavor 的值将被设置为 “cherry”。
当然，最有用的是设置一组 radio button 元素对应到一个单个 的 view model 属性。确保一次只能选择一个 radio button 需要将他们的 name 属性名都设置成一样的值（例如上个例子的 flavorGroup 值）。这样的话，一次 就只能选择一个了。
如果参数是监控属性 observable 的，那元素的 checked 状态将根据参数 值的变化而更新，如果不是，那元素的 value 值将只设置一次并且以后不在更新。