Knockout 新版應用開發教程之"text"綁定注1：使用函數或者表達式來決定text值注2：關于HTML編碼注3：不能在一個容器元素中用“text”注4: 關于IE6空白空格的怪癖

目的

DOM元素顯示文本的值是你傳遞的參數，前提是text先綁定到該元素上

典型的常用元素 <span>或者<em>習慣性的用來顯示文本，但是在技術上來說你可以用任何元素的。

例子：

2

3

4

5

6

7

8

9

<code>Today's message is: &lt;span data-bind=</code><code>"text: myMessage"</code><code>&gt;&lt;/span&gt;</code>

<code> </code> 

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>var</code> <code>viewModel = {</code>

<code>        </code><code>myMessage: ko.observable()</code><code>// Initially blank</code>

<code>    </code><code>};</code>

<code>    </code><code>viewModel.myMessage(</code><code>"Hello, world!"</code><code>);</code><code>// Text appears</code>

<code>&lt;/script&gt;</code>

參數

主要參數

Knockout 會把參數值設定到元素文本節點上，節點上任何存在的内容将會被覆寫重寫

這個參數是一個監控屬性值，任何時候在值被改變的時候它綁定元素text将會觸發更新，假如不是一個監控屬性，它僅僅就是text，不會更新

假如你提供一些非數字或者字元串（舉例來說，你對象或者數組，那顯示的文本将是yourParameter.toString()的等價内容。

附加參數

無

<a></a>

例如：

10

11

<code>The item is &lt;span data-bind=</code><code>"text: priceRating"</code><code>&gt;&lt;/span&gt; today.</code>

<code>        </code><code>price: ko.observable(24.95)</code>

<code>    </code><code>viewModel.priceRating = ko.computed(</code><code>function</code><code>() {</code>

<code>        </code><code>return</code> <code>this</code><code>.price() &gt; 50 ?</code><code>"expensive"</code> <code>:</code><code>"affordable"</code><code>;</code>

<code>    </code><code>}, viewModel);</code>

如上，現在你的text将會在“expensive” 和“affordable”選擇，每當<code>price改變的時候.</code>

<code>也許，你隻是想做一些簡單的操作，你不需要是建立一個依賴監控屬性。你能通過任意的javascript表達式去綁定text，</code>

<code>例如：</code>

<code>The item is &lt;span data-bind=</code><code>"text: price() &gt; 50 ? 'expensive' : 'affordable'"</code><code>&gt;&lt;/span&gt; today.</code>

同樣的結果，但我們不需要再聲明<code>priceRating</code>依賴監控屬性

因為這個綁定，設定你的文本值使用一個文本節點，是以它是安全的如果設定任何的字元串的值，沒有HTML或者腳本注入的風險

例如，如果你這樣寫：

<code>viewModel.myMessage(</code><code>"&lt;i&gt;Hello, world!&lt;/i&gt;"</code><code>);</code>

這個斜體的文本将不會渲染出來，而是原樣輸出标簽。如果你需要顯示HTML内容，請參考html綁定.

有時，你想要用KO設定一text，但是<code>text綁定不能包含一個額外的元素</code>

<code></code>例如，在一個option節點中，你不允包含其他的元素，是以下面将不會工作。

<code>&lt;select data-bind=</code><code>"foreach: items"</code><code>&gt;</code>

<code>    </code><code>&lt;option&gt;Item &lt;span data-bind=</code><code>"text: name"</code><code>&gt;&lt;/span&gt;&lt;/option&gt;</code>

<code>&lt;/select&gt;</code>

為了處理這樣的情況，你能用containerless文法,它是基于注釋标簽

<code>    </code><code>&lt;option&gt;Item &lt;!--ko text: name--&gt;&lt;!--/ko--&gt;&lt;/option&gt;</code>

<code>&lt;!--ko--&gt;和&lt;!--/ko—&gt; ，注釋是充當開始/結束标記，定義一個‘virtual element’在包含的标記内，</code>

Knockout能了解virtual element的文法規則，并且能夠綁定好，如果你有一個真正的容器元素

IE6 有一個怪癖，如果 span裡有空格的話，它将自動變成一個空的span。

如果你想編寫如下的代碼的話，那Knockout将不起任何作用：

<code>Welcome, &lt;span data-bind=</code><code>"text: userName"</code><code>&gt;&lt;/span&gt; to our web site.</code>

… IE6 将不會顯示span中間的那個空格，你可以通過下面這樣的代碼避免這個問題：

<code>Welcome, &lt;span data-bind=</code><code>"text: userName"</code><code>&gt;&amp;nbsp;&lt;/span&gt; to our web site.</code>

IE6以後版本和其它浏覽器都沒有這個問題

依賴性：除KO核心類庫外，無依賴。

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/3197389.html，如需轉載請自行聯系原作者