value: <binding-value>

优质

小牛编辑

129浏览

2023-12-01

此绑定用于将相应DOM元素的值链接到ViewModel属性。大多数情况下，它与input ， select和textarea等元素一起使用。这类似于文本绑定，不同之处在于，值绑定数据可以由用户更改，ViewModel将自动更新它。

Syntax

value: <binding-value>

Parameters

HTML DOM元素的value属性设置为参数值。较早的值将被覆盖。
如果参数是可观察值，则在更改基础observable时更新元素值。如果没有使用可观察的元素，则仅处理一次元素。
valueUpdate是一个额外的参数，也可以提供额外的功能。在绑定中使用valueUpdate参数时，KO使用其他事件来检测额外更改。以下是一些常见事件 -
- input - 当input元素的值发生更改时，ViewModel会更新。
- keyup - 当用户释放密钥时，ViewModel会更新。
- keypress - 键入密钥时更新ViewModel。
- afterkeydown - 一旦用户开始输入字符，ViewModel就会不断更新。

Example

让我们看看以下示例，该示例演示了值绑定的使用。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   <body>
      <p>Enter your name: 
         <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />
      </p>
      <p>Your name is : <span data-bind = "text: yourName"></span></p>
      <script type = "text/javascript">
         function ViewModel () {
            this.yourName = ko.observable('');
         };
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在value-bind.htm文件中。
在浏览器中打开此HTML文件。
由于使用了valueUpdate，在文本框中输入的数据会立即更新。

观察 (Observations)

从输入立即接收值更新

如果希望input元素立即更新ViewModel，请使用textInput绑定。考虑到浏览器的奇怪行为，它比valueUpdate选项更好。

处理下拉列表（元素）

KO以特殊方式支持下拉列表（元素）。值绑定和选项绑定一起工作，允许您读取和写入值，这些值是随机JavaScript对象而不仅仅是字符串值。

将valueAllowUnset与元素一起使用

使用此参数，可以使用在select元素中实际不存在的值设置model属性。这样，当用户第一次查看下拉列表时，可以将默认选项保留为空白。

Example

让我们看一下使用valueAllowUnset选项的以下示例。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding - working with drop-down lists</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   <body>
      <p>Select a City:
         <select data-bind = " options: cities,
            optionsCaption: 'Choose City...',
            value: selectedCity,
            valueAllowUnset: true"></select>
      </p>
      <script type = "text/javascript">
         function ViewModel() {
            this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
            selectedCity = ko.observable('Newark')
         };
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在value-bind-drop-down.htm文件中。
在浏览器中打开此HTML文件。
为selectedCity分配值，该值不在列表中。这使得下拉列表第一次变为空白。

更新可观察和不可观察的属性值

如果使用value将表单元素链接到Observable属性，则KO能够创建双向绑定，以便在它们之间交换它们之间的更改。

如果您使用不可观察的属性（普通的String或JavaScript表达式），那么KO将执行以下操作 -

如果在ViewModel上引用一个简单属性，KO会将表单元素的初始状态设置为属性值。如果更改了表单元素，那么KO会将新值写回属性，但它无法检测到属性中的任何更改，从而使其成为单向绑定。
如果你引用一些不简单的东西，比如比较结果或函数调用那么，KO会将表单元素的初始状态设置为该值，但不能再写入用户对表单元素所做的任何更改。我们可以将其称为一次性值设定器。

Example

以下代码段显示了可观察和不可观察属性的使用。

<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal" /></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal" /></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8" /></p>
<script type = "text/javascript">
   function viewModel() {
      firstVal =  ko.observable("hi there"),     // Observable
      secondVal = "Wats up!!!"                   // Not observable
   };
</script>

使用带有检查绑定的值绑定

如果包含与已检查绑定的值绑定，则值绑定的行为类似于checkedValue选项，可以与已检查的绑定一起使用。它将控制用于更新ViewModel的值。

value: &lt;binding-value&gt;

观察 (Observations)

从输入立即接收值更新

处理下拉列表（元素）

将valueAllowUnset与元素一起使用

更新可观察和不可观察的属性值

使用带有检查绑定的值绑定

value: <binding-value>