Knockout text绑定DOM的使用方法
2013-11-15 09:48
591 查看
简单绑定
复制代码 代码如下:
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将不起任何作用。
复制代码 代码如下:
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 call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
- knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定
- Knockout visible绑定使用方法
- Knockout visible绑定使用方法
- Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
- JavaScript call apply使用——JavaScript对象的方法绑定到DOM事件后this指向问题
- AndroidAnnotations框架@Ebean,@RootContext,@Background,@UiThread,@AfterInject,@AfterTextChange标签的使用方法
- Android TextView 使用随机背景颜色的方法
- domload事件绑定方法
- [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法
- oracle_使用udev绑定磁盘方法
- vue中使用refs定位dom出现undefined的解决方法
- javascript 的onclick和click 在 ie 和mozilla中的使用 ;jquery 的dom事件绑定
- win10取消微软帐户绑定使用本地账户登录的解决方法
- 事件绑定方法live和bind的区别及使用场合
- jQuery的三种bind/One/Live事件绑定使用方法
- 便捷替换背景色与其他属性onmousemove="javascript:this.bgColor='#FCFDEE';",当DOM事件触发时this代表触发事件的DOM对象,所以可以使用对应DOM对象的属性和方法。