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库