Text绑定

目的

Text绑定主要是让DOM元素显示参数值。

通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素。

示例

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()的结果。

其他参数

注意事项

注1:使用函数或表达式来决定text值

如果你想text值可编程化,一种选择是创建计算属性,然后在运算函数中编码决定text中显示什么。

例如:

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);
</script>

现在,text值将会在“expensive”和“affordable”之间选择,而这主要取决于“price”的变化。然而,假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。

例如:

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

注2:关于HTML编码

由于text绑定是利用元素的text节点属性来设置文本值,你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。例如,如果你输入以下内容:

viewModel.myMessage("<i>Hello, world!</i>");

它将不会显示一个斜体文本,而是按原样进行标签输出。

如果你想设置一个HTML内容,你可以参数HTML绑定。

注3:使用“text”而没有一个容器元素

有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如,在option元素中是不允许存在其他元素的,所以下面的绑定是无法正常工作的。

<select data-bind="foreach: items"> <option>Item<span data-bind="text: name"></span></option></select>

为了解决这个问题,你可以使用容器语法,它基于一个注释元素。

<select data-bind="foreach: items"> 
<option>Item<!--ko text: name--><!--/ko--></option>
</select>

<!--ko-->和<!--/ko-->注释标记作为起始和结束符,定义一个“虚拟元素”,里面包含了标记,Knockout能够识别这种虚拟元素语法和绑定作为你需要的容器元素而存在。

注4:一个关于IE6 白空格

IE6有一个奇怪的现象,如果span有空格的话,它会变成一个空span,如果你编写以下代码,Knockout不会起任何作用。

Welcome,<spandata-bind="text: userName"></span>to our web site.

IE6不会显示span中间的那个空格,如果你想避免这个问题,你可以在<span>中输入任意内容。比如:

Welcome,<spandata-bind="text: userName"></span>to our web site.

其他浏览器或者版本较新的IE浏览器不会出现这个问题。

依赖关系

除了Knockout核心库之外,无依赖关系。