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"> </span> to our web site.
其他浏览器，包括新版的IE都不会有这种情况。
依赖
只有核心KO库
