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

列印頁面