手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Knockout text绑定DOM的使用方法
Knockout text绑定DOM的使用方法
摘要:简单绑定复制代码代码如下:Today'smessageis:varviewModel={myMessage:ko.observable()}...

简单绑定

复制代码 代码如下:

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中添加一个属性,并且添加一个依赖监控属性

复制代码 代码如下:

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将不起任何作用。

【Knockout text绑定DOM的使用方法】相关文章:

javascript搜索框效果实现方法

javascript操作ul中li的方法

javascript先序遍历DOM树的方法

javascript实现模拟时钟的方法

javascript中this的四种用法

JavaScript中reduce()方法的使用详解

JQuery给网页更换皮肤的方法

JavaScript中指定函数名称的相关方法

Backbone.js的一些使用技巧

js+cookies实现悬浮购物车的方法

精品推荐
分类导航