KnockoutJS - 值绑定

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

语法

value: <binding-value>

参数

HTML DOM 元素的 value 属性设置为参数值。先前的值将被覆盖。
如果参数是可观察值，则当底层可观察值发生变化时，元素值会更新。如果未使用可观察对象，则仅处理元素一次。
valueUpdate 是一个额外参数，也可以提供额外的功能。当在绑定中使用 valueUpdate 参数时，KO 使用附加事件来检测额外更改。以下是一些常见事件 −
- input − 当输入元素的值发生变化时，ViewModel 会更新。
- keyup − 当用户释放按键时，ViewModel 会更新。
- keypress − 当键入按键时，ViewModel 会更新。
- afterkeydown −一旦用户开始输入字符，ViewModel 就会持续更新。

示例

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

<!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>

输出

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

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

观察

立即从输入中接收值更新

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

处理下拉列表(<select> 元素)

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

将 valueAllowUnset 与 <select> 元素一起使用

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

示例

让我们看看以下使用 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>

输出

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

将上述代码保存在 value-bind-drop-down.htm 文件中。
在浏览器中打开此 HTML 文件。
selectedCity 被分配了列表中不存在的值。这会使下拉菜单首次显示为空白。

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

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

如果您使用不可观察属性(纯字符串或 JavaScript 表达式)，则 KO 将执行以下操作 −

如果您在 ViewModel 上引用简单属性，KO 会将表单元素的初始状态设置为属性值。如果表单元素发生变化，KO 会将新值写回属性，但它无法检测到属性中的任何变化，因此使其成为单向绑定。
如果您引用的内容不简单，例如比较结果或函数调用，则 KO 会将表单元素的初始状态设置为该值，但无法写入用户对表单元素所做的任何更改。我们可以将其称为一次性值设置器。

示例

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

<!-- 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>