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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
javascript实现时钟动画
Dec 03 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 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
用console.table()调试javascript
2014/09/04 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python中设置变量访问权限的方法
2015/04/27 Python
利用Python破解验证码实例详解
2016/12/08 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
毕业论文致谢范文
2015/05/14 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2016年母亲节寄语
2015/12/04 职场文书
Python常遇到的错误和异常
2021/11/02 Python
Linux中各个目录的作用与内容
2022/06/28 Servers