首頁 > web前端 > js教程 > Knockout text綁定DOM的使用方法_基礎知識

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

WBOY
發布: 2016-05-16 17:15:04
原創
1042 人瀏覽過
簡單綁定
複製程式碼 程式碼如下:


程式碼如下:
  


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將不起任何作用。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板