Knockout text綁定DOM的使用方法

來源:互聯網
上載者:User

簡單綁定
複製代碼 代碼如下:
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">   
    var viewModel = {       
        myMessage: ko.observable()    
    };
    viewModel.myMessage("Hello, world!");
    ko.applyBindings(viewModel);
</script>

KO將參數值會設定在元素的innerText (IE)或textContent(Firefox和其它相似瀏覽器)屬性上。原來的文本將會被覆蓋。
如果參數是監控屬性observable的,那元素的text文本將根據參數值的變化而更新,如果不是,那元素的text文本將只設定一次並且以後不在更新。
如果你傳的是不是數字或者字串(例如一個對象或者數組),那顯示的文本將是yourParameter.toString()的等價內容。
使用函數或者運算式來決定text值
繼續在上面的ViewModel中添加一個屬性,並且添加一個依賴監控屬性
複製代碼 代碼如下:
price: ko.observable(24.95)
    viewModel.priceRating = ko.dependentObservable(
        function () {
         return this.price() > 50 ? "expensive" : "affordable";
        }, viewModel);

添加一個UI頁面元素進行綁定
複製代碼 代碼如下:
The item is <span data-bind="text: priceRating"></span> today.

現在,text文本將在“expensive”和“affordable”之間替換,取決於價格怎麼改變。
關於HTML encoding
因為該綁定是設定元素的innerText或textContent (而不是innerHTML),所以它是安全的,沒有HTML或者指令碼注入的風險。例如:如果你編寫如下代碼:
複製代碼 代碼如下:
viewModel.myMessage("<i>Hello, world!</i>");

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.