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，如需转载请自行联系原作者