快捷導(dǎo)航

Knockout text綁定DOM的使用方法

更新時(shí)間：2013年11月15日 09:48:40 作者：

本文講解Knockout text綁定到DOM元素上，使得該元素顯示的文本值為你綁定的參數(shù)。該綁定在顯示或者上非常有用，可以用在任何元素上

簡(jiǎn)單綁定

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將參數(shù)值會(huì)設(shè)置在元素的innerText （IE）或textContent（Firefox和其它相似瀏覽器）屬性上。原來的文本將會(huì)被覆蓋。
如果參數(shù)是監(jiān)控屬性observable的，那元素的text文本將根據(jù)參數(shù)值的變化而更新，如果不是，那元素的text文本將只設(shè)置一次并且以后不在更新。
如果你傳的是不是數(shù)字或者字符串（例如一個(gè)對(duì)象或者數(shù)組），那顯示的文本將是yourParameter.toString()的等價(jià)內(nèi)容。
使用函數(shù)或者表達(dá)式來決定text值
繼續(xù)在上面的ViewModel中添加一個(gè)屬性，并且添加一個(gè)依賴監(jiān)控屬性

復(fù)制代碼代碼如下:

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

添加一個(gè)UI頁(yè)面元素進(jìn)行綁定

復(fù)制代碼代碼如下:

The item is today.

現(xiàn)在，text文本將在“expensive”和“affordable”之間替換，取決于價(jià)格怎么改變。
關(guān)于HTML encoding
因?yàn)樵摻壎ㄊ窃O(shè)置元素的innerText或textContent （而不是innerHTML），所以它是安全的，沒有HTML或者腳本注入的風(fēng)險(xiǎn)。例如：如果你編寫如下代碼：

復(fù)制代碼代碼如下:

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

它不會(huì)顯示斜體字，而是原樣輸出標(biāo)簽。如果你需要顯示HTML內(nèi)容，請(qǐng)參考html綁定.
關(guān)于IE 6的白空格whitespace
IE6有個(gè)奇怪的問題，如果 span里有空格的話，它將自動(dòng)變成一個(gè)空的span。如果你想編寫如下的代碼的話，那Knockout將不起任何作用。

您可能感興趣的文章: