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 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
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/01 无线电
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python pandas生成时间列表
2019/06/29 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
《日月潭》教学反思
2014/02/28 职场文书
爱我中华教学反思
2014/04/28 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
环保项目建议书
2014/08/26 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年政工师工作总结
2014/12/18 职场文书
2015年清明节活动总结
2015/02/09 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
天鹅湖观后感
2015/06/09 职场文书
工程款催款函
2015/06/24 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android