Knockout text绑定DOM的使用方法 |
|
本文标签：Knockout,text绑定 简单绑定 复制代码 代码如下: Todays message is: <span data-bind="text: myMessage"></span> <script type="text/javascript" src="'/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { myMessage: ko.observable() }; viewModel.myMessage("Hello, world!"); ko.applyBindings(viewModel); </script> KO将参数值会设置在元素的innerText （IE）或textContent（Firefox和其它相似浏览器）属性上 。原来的文本将会被覆盖 。 如果参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，如果不是，那元素的text文本将只设置一次并且以后不在更新 。 如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容 。 使用函数或者表达式来决定text值 继续在上面的ViewModel中添加一个属性，并且添加一个依赖监控属性 复制代码 代码如下: price: ko.observable(24.95) viewModel.priceRating = ko.dependentObservable( function () { return this.price() > 50 ? "expensive" : "affordable"; }, viewModel); 添加一个UI页面元素进行绑定 复制代码 代码如下: The item is <span data-bind="text: priceRating"></span> today. 现在，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变 。 关于HTML encoding 因为该绑定是设置元素的innerText或textContent （而不是innerHTML），所以它是安全的，没有HTML或者脚本注入的风险 。例如：如果你编写如下代码： 复制代码 代码如下: viewModel.myMessage("<i>Hello, world!</i>"); 它不会显示斜体字，而是原样输出标签 。如果你需要显示HTML内容，请参考html绑定. 关于IE 6的白空格whitespace IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span 。如果你想编写如下的代码的话，那Knockout将不起任何作用 。 |
