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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue router 配置路由的方法
Jul 26 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 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
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php实例化一个类的具体方法
2019/09/19 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Django中使用group_by的方法
2015/05/26 Python
Python中方法链的使用方法
2016/02/23 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python实现kMeans算法
2017/12/21 Python
python实现汽车管理系统
2018/11/30 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python import 上级目录的导入
2020/11/03 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
幼儿园门卫制度
2014/01/29 职场文书
党员承诺践诺书
2014/05/20 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
离婚答辩状怎么写
2015/05/22 职场文书