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分析、压缩工具JavaScript Analyser
Dec 31 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
angular 服务随记小结
May 06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
Vue组件实现触底判断
Jun 26 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 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
js实现点赞效果
2020/03/16 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python 6行代码制作月历生成器
2020/09/18 Python
python3中数组逆序输出方法
2020/12/01 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
公益活动策划方案
2014/01/09 职场文书
网络编辑岗位职责
2014/03/18 职场文书
单位未婚证明范本
2014/11/25 职场文书
英文道歉信
2015/01/20 职场文书
介绍长城的导游词
2015/01/30 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
紧急通知
2015/04/17 职场文书
2015年共青团工作总结
2015/05/15 职场文书
小学同学聚会感言
2015/07/30 职场文书
财务年终工作总结大全
2019/06/20 职场文书