Text绑定
目的
Text绑定主要是让DOM元素显示参数值。
通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。
示例
|
1
2 3 4 5 6 7 8 |
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!"); // Text appears </script> |
参数
主要参数
Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。
如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。
如果你传入的不是一个值或者一个字符串（比如：你传入一个对象或者数组）那么显示的文本将是yourParameter.toString()的结果。
其他参数
无
传递多次text时使用这种写法
<div data-bind="text:myText1"></div>
<div data-bind="text:myText2"></div>
<script>
var viewModel = {
myText1:ko.observable("nihao"),
myText2:ko.observable("China")
};
ko.applyBindings(viewModel);
</script>
注意事项
注1：使用函数或表达式来决定text值
如果你想text值可编程化，一种选择是创建计算属性，然后在运算函数中编码决定text中显示什么。
例如：
|
1
2 3 4 5 6 7 8 9 10 |
The item is <span data-bind="text: priceRating"></span> today.
<script type="text/javascript"> var viewModel = { price: ko.observable(24.95) }; viewModel.priceRating = ko.computed(function() { return this.price() > 50 ? "expensive" : "affordable"; }, viewModel); ko.applyBindings(viewModel);
</script> |
现在，text值将会在“expensive”和“affordable”之间选择，而这主要取决于“price ”的变化。
然而，假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。
例如：这个还没弄明白
|
1
|
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.
|
注2：关于HTML编码
由于text绑定是利用元素的text节点属性来设置文本值，你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。例如，如果你输入以下内容：
|
1
|
viewModel.myMessage("<i>Hello, world!</i>");
|
它将不会显示一个斜体文本，而是按原样进行标签输出。
如果你想设置一个HTML内容，你可以参数HTML绑定。
注3：使用“text”而没有一个容器元素 使用<!--ko--> 和<!--/ko-->
有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如，在option元素中是不允许存在其他元素的，所以下面的绑定是无法正常工作的。
|
1
2 3 |
<select data-bind="foreach: items">
<option>Item <span data-bind="text: name"></span></option> </select> |
为了解决这个问题，你可以使用容器语法，它基于一个注释元素。
|
1
2 3 |
<select data-bind="foreach: items">
<option>Item <!--ko text: name--><!--/ko--></option> </select> |
<!--ko--> 和<!--/ko--> 注释标记作为起始和结束符，定义一个“虚拟元素”，里面包含了标记，Knockout能够识别这种虚拟元素语法和绑定作为你需要的容器元素而存在。
注4：一个关于IE6 白空格
IE6有一个奇怪的现象，如果span有空格的话，它会变成一个空span，如果你编写以下代码，Knockout不会起任何作用。
|
1
|
Welcome, <span data-bind="text: userName"></span> to our web site.
|
IE6不会显示span中间的那个空格，如果你想避免这个问题，你可以在<span>中输入任意内容。比如：
|
1
|
Welcome, <span data-bind="text: userName"> </span> to our web site.
|
其他浏览器或者版本较新的IE浏览器不会出现这个问题。