KnockoutJS - textInput 绑定

此绑定用于在文本框或文本区域与 ViewModel 属性之间创建双向绑定。它与 value 绑定的区别在于，此绑定使各种输入类型的 HTML DOM 中的即时更新可用。

语法

textInput: <binding-value>

参数

HTML DOM 元素的 value 属性设置为参数值。之前的数值将被覆盖。
如果参数不是数字或字符串（例如对象或数组），则显示的文本等效于字符串格式。
如果参数是可观察对象，则当基础可观察对象更改时，元素的值会更新。如果未使用可观察对象，则元素仅处理一次。
在大多数情况下，由于 textInput 能够为每种输入类型提供来自 DOM 的实时更新以及处理浏览器奇怪行为的能力，因此 textInput 比 value 绑定更受欢迎。

示例

让我们来看下面的示例，它演示了 textInput 绑定的用法。

在线演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS textInput Binding </title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> Enter your reviews here: <br><br><textarea rows=5 
      data-bind = "textInput: someReview" ></textarea><br></p>
      
      <p> You entered : <span data-bind = "text: someReview"></span></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.someReview = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码是如何工作的：

将以上代码保存在 textinput-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
在文本区域中输入的数据会立即更新到 ViewModel 中。

观察结果

textInput 与 Value 绑定

textInput 绑定提供即时实时更新。textInput 和 Value 绑定的主要区别在于：

即时更新 - 默认情况下，value 绑定仅在用户将焦点移出文本框时更新模型。textInput 绑定在每次按键或其他文本输入机制后立即更新模型。

浏览器事件异常处理 - 浏览器在响应异常文本输入机制（如拖放、剪切或允许自动完成建议）时触发的事件高度不可预测。value 绑定不会处理所有浏览器上的所有文本输入情况。

textInput 绑定专门设计用于处理各种浏览器奇怪的行为。这样，即使在异常文本输入机制的情况下，它也能提供一致且即时的模型更新。

knockoutjs_declarative_bindings.htm

打印页面