textInput: <binding-value>

优质

小牛编辑

143浏览

2023-12-01

此绑定用于在文本框或textarea与ViewModel属性之间创建双向绑定。此绑定和值绑定之间的区别在于此绑定可以从HTML DOM中为各种输入类型提供即时更新。

Syntax

textInput: <binding-value>

Parameters

HTML DOM元素的value属性设置为参数值。较早的值将被覆盖。
如果参数不是Number或String（例如对象或数组），则显示的文本等效于String格式。
如果参数是可观察的，则在更改基础observable时更新元素值。如果没有使用可观察的元素，则只处理一次元素。
在大多数情况下，textInput优先于值绑定，因为textInput能够为每种输入类型提供DOM的实时更新，并能够处理浏览器的奇怪行为。

Example

让我们看一下下面的示例，该示例演示了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>

Output

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

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

观察 (Observations)

textInput与Value绑定

textInput绑定提供即时实时更新。 textInput和value Binding之间的主要区别是 -

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

Browser event weirdness handling - 浏览器在响应不寻常的文本输入机制（例如拖动，剪切或允许自动完成建议）而触发的事件中高度不可预测。值绑定不处理所有浏览器上的所有文本输入案例。

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

textInput: &lt;binding-value&gt;

观察 (Observations)

textInput与Value绑定

textInput: <binding-value>