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 对象，而不仅仅是字符串值。

在 <select> 元素中使用 valueAllowUnset

使用此参数，可以将模型属性设置为实际上在 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>

将值绑定与选中绑定一起使用

如果将值绑定与选中绑定一起包含，则值绑定将类似于 checkedValue 选项（可与选中绑定一起使用）。它将控制用于更新 ViewModel 的值。

knockoutjs_declarative_bindings.htm
打印页面
上一页
下一页
广告