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 相关文章推荐
js操作table示例(个人心得)
Nov 29 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
js获取ip和地区
Mar 10 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
vue实现搜索功能
May 28 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
thinkphp分页集成实例
2017/07/24 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
容易被忽略的Python内置类型
2020/09/03 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
详解Python中的Lock和Rlock
2021/01/26 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
实用求职信范文分享
2013/12/25 职场文书
大学生实习证明范本
2014/01/15 职场文书
技术负责人任命书
2014/06/05 职场文书
模具专业求职信
2014/06/26 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
增值税发票丢失证明
2015/06/19 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL