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 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
js实现计时器秒表功能
Dec 16 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
js实现div闪烁原理及实现代码
2014/06/24 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python调用私有属性的方法总结
2020/07/24 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
python制作微博图片爬取工具
2021/01/16 Python
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
经营管理策划方案
2014/05/22 职场文书
计划生育宣传标语
2014/06/21 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
家电创业计划书
2019/08/05 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers