Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定

2. 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>

参数

• 主参数
  • KO把你的参数值设置为元素文本节点的内容。任何之前的内容会被重写。
  • 如果参数是监控对象，在值改变时，元素文本会自动更新。如果参数不是监控对象，则只在第一次会更新。
  • 你如果输入一些数字或字符串（即传入一个对象或数组），显示内容等同于 yourParameter.toString()的结果。
• 额外参数
  • 无

注意事项 1：使用函数或表达式确定文本内容

如果你想通过程序确定文本内容，一个可选的方式是创建一个计算监控，使用求值函数在其中写自定义逻辑来确定显示内容。

比如：

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

<script type="text/javascript">
    var viewModel = {
        price: ko.observable(24.95)
    };
    viewModel.priceRating = ko.pureComputed(function() {
        return this.price() > 50 ? "expensive" : "affordable";
    }, viewModel);
</script>

现在当价格改变时，文本值会在expensive和affordable之间切换。

另外，如果你要实现的功能像下面一样简单，你不需要创建一个计算监控，你可以传入一个javascript表达式给text绑定，比如：

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

两个的结果是一样的，但是不需要priceRating 计算监控。

注意事项 2：HTML 编码

因为使用文本节点来绑定你的文本值，所以设置任何字符串都是安全的，而不用担心html或脚本注入。比如，你像下面这样写：

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

它不会呈现会斜体文本，即不会进行解析，只会原文呈现。

如果你需要用这种方式设置HTML内容，请看HTML绑定

注意事项 3 ：使用“text”绑定而不需要容器元素

有时候你想要使用KO设置文本内容而不想添加一个额外的标签用于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--> and <!--/ko-->作为开始/结束标记，定义了一个“虚拟元素”包含在里面。KO能解析这种虚拟元素语法，并且绑定值就像真有容器元素一样。

注意事项 4 ：关于IE 6 的空格怪异模式

IE 6有一个奇怪的现象，有时会忽略空格，如下面闭合的空span标签所示。KO没有什么好的方法可以解决，如果你像这样写：

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都不会有这种情况。

依赖

只有核心KO库