KnockoutJS - 文字繫結

文字繫結使關聯的 DOM 元素顯示引數的文字值。這用於文字級 DOM 元素，例如<span>或<em>。文字繫結接受任何資料型別，並在渲染之前將其解析為字串。

語法

text: <binding-value>

引數

KO 將元素的內容設定為具有引數值的文字節點。任何先前的內容都將被覆蓋。
如果引數是可觀察物件，則每當底層屬性更改時，元素值都會更新，否則僅在第一次分配。
如果傳遞了數字或字串以外的任何內容，則 KO 會將其解析為與 yourParameter.toString() 等效的字串格式。
引數值也可以是返回文字值的 JavaScript 函式或任意 JavaScript 表示式。

示例

讓我們來看一下以下示例，該示例演示了文字繫結的用法。

即時演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind = "text: hiThere"></p>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Hi TutorialsPoint !!!");
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼是如何工作的：

將上述程式碼儲存在text-bind.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。

示例

讓我們來看另一個示例，其中文字是使用計算可觀察物件匯出的。

即時演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>Your full Name is <span data-bind="text: fullName"></span></p>

      <script>
         function AppViewModel() {
            this.firstName= ko.observable("John");
            this.lastName= ko.observable("Smith");

            this.fullName = ko.computed( function() {
               return this.firstName()+" "+this.lastName();
            },this);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼是如何工作的：

將上述程式碼儲存在text-bind-fun.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。

觀察結果

HTML 編碼

文字繫結轉義 HTML 實體，這意味著可以設定任何字串值而不會被注入。例如：

viewModel.message("<strong>Hi TutorialsPoint !!!</strong>");

以上程式碼只會將<strong>Hi TutorialsPoint !!!</strong>列印到螢幕上。它不會使文字變為粗體。

在沒有容器元素的情況下使用文字

有時無法使用 HTML 元素在另一個元素內設定文字。在這種情況下，可以使用無容器語法，它由如下所示的註釋標籤組成：

和註釋充當開始和結束標記，使其成為虛擬語法，並將資料繫結到就像它是一個真實的容器一樣。

讓我們來看一下以下示例。

即時演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS container less text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind="text: hiThere"></p>
      <select data-bind="foreach: items">
         <option> <!--ko text: $data --><!--/ko--></option>
      </select>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Days of week !!!");
            this.items = (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday',
               'Sunday']);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟來了解上述程式碼是如何工作的：

將上述程式碼儲存在text-bind-containerless.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
請注意，此處使用 $data 繫結上下文來顯示陣列中的當前專案。

knockoutjs_declarative_bindings.htm

列印頁面