Knockout.Js官网学习（value绑定）

前言

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>，<select>和<textarea>上。

当用户编辑表单控件的时候， view model对应的属性值会自动更新。一样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。

注：若是你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。

简单示例

 代码以下对两个input进行value的属性绑定

<p>Login name: <input data-bind="value: userName"/></p><p>Password: <input type="password" data-bind="value: userPassword"/></p><script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  <script type="text/javascript">    var viewModel = {        userName: ko.observable(""),                userPassword: ko.observable("abc")    };    ko.applyBindings(viewModel);</script> 

运行后效果为

注意密码的type为password

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>

someValue: ko.observable("edit me")

绑定下拉菜单drop-down list（例如SELECT）

 Knockout对下拉菜单drop-down list绑定有一个特殊的支持，那就是在读取和写入绑定的时候，这个值能够是任意JavaScript对象，而没必要非得是字符串。在你让你用户选择一组model对象的时候很是有用。具体例子，参考options绑定。

相似，若是你想建立一个multi-select list，参考selectedOptions绑定。

更新observable和non-observable属性值

 若是你用value绑定将你的表单元素和你的observable属性关联起来，KO设置的2-way的双向绑定，任何一方改变都会更新另一方的值。

 可是，若是你的元素绑定的是一个non-observable属性（例如是一个原始的字符串或者JavaScript表达式） ,KO会这样执行：

　　1.若是你绑定的non-observable属性是简单对象，例如一个常见的属性值，KO会设置这个值为form表单元素的初始值，若是你改变form表单元素的值，KO会将值从新写回到view mode的这个属性。但当这个属性本身改变的时候，元素却不会再变化了（由于不是observable的），因此它仅仅是1-way绑定。

　　2.若是你绑定的non-observable属性是复杂对象，例如复杂的JavaScript 表达式或者子属性，KO也会设置这个值为form表单元素的初始值，可是改变form表单元素的值的时候，KO不会再写会view model属性，这种状况叫one-time-only value setter，不是真正的绑定。

例如：

<p>First value: <input data-bind="value: firstValue"/></p>          <!-- two-way binding --><p>Second value: <input data-bind="value: secondValue"/></p>        <!-- one-way binding --><p>Third value: <input data-bind="value: secondValue.length"/></p>  <!-- no binding --> <script type="text/javascript">    var viewModel = {        firstValue: ko.observable("hello"), // Observable        secondValue: "hello, again"// Not observable    };    ko.applyBindings(viewModel);</script>