本文共 2233 字,大约阅读时间需要 7 分钟。
目的
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> |
参数
如果你想要以编程方式决定text的取值,一个选择是去创建一个 依赖属性,并且你在它的执行函数里编码,决定应该显示什么样的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
依赖监控属性
因为这个绑定,设置你的文本值使用一个文本节点,所以它是安全的如果设置任何的字符串的值,没有HTML或者脚本注入的风险
例如,如果你这样写:
2 | viewModel.myMessage( "<i>Hello, world!</i>" ); |
这个斜体的文本将不会渲染出来,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.
有时,你想要用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的语法规则,并且能够绑定好,如果你有一个真正的容器元素
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核心类库外,无依赖。