Knockout text綁定DOM的使用方法_基礎知識

簡單綁定

複製程式碼 程式碼如下:

程式碼如下：
  

KO將參數值會設定在元素的innerText （IE）或textContent（Firefox和其它相似瀏覽器）屬性上。原來的文字將會被覆蓋。
如果參數是監控屬性observable的，那麼元素的text文字會根據參數值的變化而更新，如果不是，那麼元素的text文字只會設定一次並且以後不在更新。
如果你傳的是不是數字或字串（例如物件或陣列），那麼顯示的文字將會是yourParameter.toString()的等價內容。
使用函數或表達式來決定text值
繼續在上面的ViewModel中加入一個屬性，並且加入一個依賴監控屬性

複製程式碼複製程式碼

程式碼如下:


price: ko.observable(24.95)
    viewModel.priceRating       return this .price() > 50 ? "expensive" : "affordable";
        }, viewModel);

新增一個頁面元素進行綁定

加入一個頁面元素進行綁定複製程式碼

程式碼如下:

The item is today.


現在，text文字將在「expensive」和「affordable」之間替換，取決於價格怎麼改變。

關於HTML encoding因為綁定是設定元素的innerText或textContent （而不是innerHTML），所以它是安全的，沒有HTML或腳本注入的風險。例如：如果你寫如下程式碼：複製程式碼

程式碼如下:

ModeModel.myMessage( "Hello, world!");

它不會顯示斜體字，而是原樣輸出標籤。如果你需要顯示HTML內容，請參考html綁定.關於IE 6的白空格whitespaceIE6有個奇怪的問題，如果 span裡有空格的話，它將自動變成一個空的span。如果你想寫如下的程式碼的話，那Knockout將不起任何作用。