入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

高级应用

插件

更多信息

"value" 绑定

目的

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

The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as , and .

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

When the user edits the value in the associated form control, it updates the value on your view model. Likewise, when you update the value in your view model, this updates the value of the form control on screen.

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

Note: If you’re working with checkboxes or radio buttons, use the checked binding to read and write your element’s checked state, not the value binding.

例子

  1. <p>Login name: <input data-bind="value: userName" /></p>
  2. <p>Password: <input type="password" data-bind="value: userPassword" /></p>
  4. <script type="text/javascript">
  5.     var viewModel = {
  6.         userName: ko.observable(""),        // Initially blank
  7.         userPassword: ko.observable("abc"), // Prepopulate
  8.     };
  9. </script>

参数

  • 主参数

KO设置此参数为元素的 value 值。之前的值将被覆盖。

KO sets the element’s value property to your parameter value. Any previous value will be overwritten.

如果参数是监控属性observable的，那元素的value值将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。

If this parameter is an observable value, the binding will update the element’s value whenever the value changes. If the parameter isn’t observable, it will only set the element’s value once and will not update it again later.

如果你提供的参数不是一个数字或者字符串（而是对象或者数组）的话，那显示的value值就是 yourParameter.toString() 的内容（通常没用，所以最好都设置为数字或者字符串）。

If you supply something other than a number or a string (e.g., you pass an object or an array), the displayed text will be equivalent to yourParameter.toString() (that’s usually not very useful, so it’s best to supply string or numeric values).

不管什么时候，只要你更新了元素的值，那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点（例如 change 事件）的时候，KO才更新这个值，但是你可以通过第2个参数 valueUpdate 来特别指定改变值的时机。

Whenever the user edits the value in the associated form control, KO will update the property on your view model. By default, KO updates your view model when the user transfers focus to another DOM node (i.e., on the change event), but you can control when the value is updated using the valueUpdate parameter described below.

  • 其他参数

    • valueUpdate

如果你使用 valueUpdate 参数，那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项：

If your binding also includes a parameter called valueUpdate, this defines which browser event KO should use to detect changes. The following string values are the most commonly useful choices:

  1. - <code>&#34;change&#34;</code> (默认) - 当失去焦点的时候更新view model的值，或者是 <code><select></select></code> 元素被选择的时候。 
  2. - <code>&#34;change&#34;</code> (default) - updates your view model when the user moves the focus to a different control, or in the case of <code><select></select></code> elements, immediately after any change 
  3. - <code>&#34;keyup&#34;</code> - 当用户敲完一个字符以后立即更新view model。 
  4. - <code>&#34;keyup&#34;</code> - updates your view model when the user releases a key 
  5. - <code>&#34;keypress&#34;</code> - 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 <code>keyup</code> ，这个更新和keydown是一样的。 
  6. - <code>&#34;keypress&#34;</code> - updates your view model when the user has typed a key. Unlike <code>keyup</code>, this updates repeatedly while the user holds a key down 
  7. - <code>&#34;afterkeydown&#34;</code> - 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的 <code>keydown</code> 事件或异步函数事件。 
  8. - <code>&#34;afterkeydown&#34;</code> - updates your view model as soon as the user begins typing a character. This works by catching the browser’s <code>keydown</code> event and handling the event asynchronously.

上述这些选项，如果你想让你的view model进行实时更新，使用 "afterkeydown" 是最好的选择。

Of these options, "afterkeydown" is the best choice if you want to keep your view model updated in real-time.

例子`:

  1. <p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /></p>
  2. <p>You have typed: <span data-bind="text: someValue"></span></p> <!-- updates in real-time -->
  4. <script type="text/javascript">
  5.     var viewModel = {
  6.         someValue: ko.observable("edit me")
  7.     };
  8. </script>

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

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

Knockout has special support for drop-down lists (i.e., nodes). The value binding works in conjunction with the options binding to let you read and write values that are arbitrary JavaScript objects, not just string values. This is very useful if you want to let the user select from a set of model objects. For examples of this, see the options binding

类似，如果你想创建一个multi-select list，参考 selectedOptions 绑定。

Similarly, if you want to create a multi-select list, see the documentation for the selectedOptions binding.

注2：更新observable和non-observable属性值

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

If you use value to link a form element to an observable property, KO is able to set up a 2-way binding so that changes to either affect the other.

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

However, if you use value to link a form element to a non-observable property (e.g., a plain old string, or an arbitrary JavaScript expression), KO will do the following:

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

  • If you reference a simple property, i.e., it is just a regular property on your view model, KO will set the form element’s initial state to the property value, and when the form element is edited, KO will write the changes back to your property. It cannot detect when the property changes (because it isn’t observable), so this is only a 1-way binding.

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

  • If you reference something that is not a simple property, e.g., a complex JavaScript expression or a sub-property, KO will set the form element’s initial state to that value, but it will not be able to write any changes back when the user edits the form element. In this case it’s a one-time-only value setter, not a real binding.

例子:

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

依赖性

除KO核心类库外，无依赖。

(c) knockoutjs.com