源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Knockout text绑定DOM的使用方法

  • 时间:2021-03-10 14:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Knockout text绑定DOM的使用方法
[b]简单绑定 [/b]
[u]复制代码[/u] 代码如下:
Today's 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中添加一个属性,并且添加一个依赖监控属性
[u]复制代码[/u] 代码如下:
price: ko.observable(24.95)     viewModel.priceRating = ko.dependentObservable(         function () {          return this.price() > 50 ? "expensive" : "affordable";         }, viewModel);
添加一个UI页面元素进行绑定
[u]复制代码[/u] 代码如下:
The item is <span data-bind="text: priceRating"></span> today.
现在,text文本将在“expensive”和“affordable”之间替换,取决于价格怎么改变。 关于HTML encoding 因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:
[u]复制代码[/u] 代码如下:
viewModel.myMessage("<i>Hello, world!</i>");
它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定. 关于IE 6的白空格whitespace IE6有个奇怪的问题,如果 span里有空格的话,它将自动变成一个空的span。如果你想编写如下的代码的话,那Knockout将不起任何作用。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部