Knockout text绑定DOM的使用方法


Posted in Javascript onNovember 15, 2013

简单绑定

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将不起任何作用。
Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Knockout visible绑定使用方法
Nov 15 #Javascript
Knockout数组(observable)使用详解示例
Nov 15 #Javascript
图片上传插件jquery.uploadify详解
Nov 15 #Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 #Javascript
Json和Jsonp理论实例代码详解
Nov 15 #Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php短址转换实现方法
2015/02/25 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
对python多线程与global变量详解
2018/11/09 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python学生管理系统开发
2019/01/30 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
Linux操作面试题
2015/02/11 面试题
高三毕业典礼主持词
2014/03/27 职场文书
教研活动总结
2014/04/28 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书