目的
DOM元素显示文本的值是你传递的参数，前提是text先绑定到该元素上
典型的常用元素 <span>或者<em>习惯性的用来显示文本，但是在技术上来说你可以用任何元素的。
例子：
|
2
3
4
5
6
7
8
9
|
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 会把参数值设置到元素文本节点上，节点上任何存在的内容将会被覆盖重写
- 这个参数是一个监控属性值，任何时候在值被改变的时候它绑定元素text将会触发更新，假如不是一个监控属性，它仅仅就是text，不会更新
- 假如你提供一些非数字或者字符串（举例来说，你对象或者数组，那显示的文本将是yourParameter.toString()的等价内容。
- 附加参数
- 无
注1：使用函数或者表达式来决定text值
如果你想要以编程方式决定text的取值，一个选择是去创建一个 computed observable 依赖属性，并且你在它的执行函数里编码，决定应该显示什么样的text文本。
例如：
|
2
3
4
5
6
7
8
9
10
11
|
The 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，
例如：
|
2
|
The item is <span data-bind=
"text: price() > 50 ? 'expensive' : 'affordable'"
></span> today.
|
同样的结果，但我们不需要再声明priceRating依赖监控属性
注2：关于HTML编码
因为这个绑定，设置你的文本值使用一个文本节点，所以它是安全的如果设置任何的字符串的值，没有HTML或者脚本注入的风险
例如，如果你这样写：
|
2
|
viewModel.myMessage(
"<i>Hello, world!</i>"
);
|
这个斜体的文本将不会渲染出来，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.
注3：不能在一个容器元素中用“text”
有时，你想要用KO设置一text，但是text绑定不能包含一个额外的元素
例如，在一个option节点中，你不允包含其他的元素，所以下面将不会工作。
|
2
3
4
|
<select data-bind=
"foreach: items"
>
<option>Item <span data-bind=
"text: name"
></span></option>
</select>
|
为了处理这样的情况，你能用containerless语法,它是基于注释标签
|
2
3
4
|
<select data-bind=
"foreach: items"
>
<option>Item <!--ko text: name--><!--/ko--></option>
</select>
|
<!--ko-->和<!--/ko—> ，注释是充当开始/结束标记，定义一个‘virtual element’在包含的标记内，
Knockout能理解virtual element的语法规则，并且能够绑定好，如果你有一个真正的容器元素
注4: 关于IE6空白空格的怪癖
IE6 有一个怪癖，如果 span里有空格的话，它将自动变成一个空的span。
如果你想编写如下的代码的话，那Knockout将不起任何作用：
|
2
|
Welcome, <span data-bind=
"text: userName"
></span> to our web site.
|
… IE6 将不会显示span中间的那个空格，你可以通过下面这样的代码避免这个问题：
|
2
|
Welcome, <span data-bind=
"text: userName"
> </span> to our web site.
|
IE6以后版本和其它浏览器都没有这个问题
依赖性：除KO核心类库外，无依赖。
