text 绑定

[wikieswan]

text 绑定

作用

text 绑定让DOM元素显示参数的值。对于 span 、 em 这些常用来表示文本的标签起作用，但是你想绑定在其他标签上也是可以的。

示例

Today's message is: <span data-bind="text: myMessage"></span>

   var viewModel = {
        myMessage: ko.observable() // Initially blank
    };
    viewModel.myMessage("Hello, world!"); // Text appears
    ko.applyBindings(viewModel);

参数说明

主要参数

Knockout 用参数的值设置DOM元素的text属性值；DOM元素原先的值会被复写。

如果参数是一个observable变量，那么一旦参数的值发生变化，页面上绑定的值都会立即改变；如果不是，那么只会在第一次绑定的时候改变页面元素的文本值，页面上的值之后就不会再被改变。

如果参数的类型不是number或者string（e.g., 对象或者数组），那么页面上展示的文本是对象到字符串等效转化的值，相当于yourParameter.toString()

其他参数

无

注意1：使用函数和表达式获取文本的值

如果想通过程序方式确定文本的值，那么需要用到可计算的observable,用可以返回文本的函数名作为参数。

e.g.

 The item is <span data-bind="text: priceRating"></span> today.

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

那么文本的值就会根据price 的变化而取 “expensive” 或者 “affordable” 。

另外，如果像下面那样只做简单的逻辑处理的话，是不需要创建可计算的observable的函数的。你可以传递任何的javascript表达式作为数据绑定。e.g.

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

注意2 HTML编码

既然绑定是用文本节点的值来设置页面上文本的值的，那么为了安全起见，设置任何字符串值的时候都应该避免HTML或者script注入。

e.g.

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

这段代码不会在页面上渲染出斜体文本，（即html标签不会被浏览器解析渲染），而是在页面上直接原样显示。

如果你要在数据模型中设置html代码，请看下文关于html绑定的说明。

注意3 不适用html元素完成文本绑定

有时候，你想完成数据绑定而不引入额外的HTML元素。例如，在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 IE 6下怪异的空格

IE 6会忽略紧跟在span标签后面的空格。例如

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

在IE 6下 to our web site前面的空格不会显示出来，解决这个问题的办法是在span标签里面加上 例如

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

在新版本的IE浏览器或者其他浏览器没有这个问题。