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 获取链接(url)参数的方法
Feb 15 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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 无线电
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
[转帖]PHP世纪万年历
2006/12/06 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
常用的js方法合集
2017/03/10 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python 如何创建一个线程池
2020/07/28 Python
Python定义一个Actor任务
2020/07/29 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
2015年办公室文员工作总结
2015/04/24 职场文书
在职证明格式样本
2015/06/15 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python