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 用户登录验证代码
Oct 29 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python实现Kmeans聚类算法
2020/06/10 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python如何调用java类
2020/07/05 Python
电子专业毕业生自我鉴定
2014/01/22 职场文书
大学生励志演讲稿
2014/04/25 职场文书
文化建设工作方案
2014/05/12 职场文书
丽江古城导游词
2015/02/03 职场文书
2016春季运动会前导词
2015/11/25 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Python经常使用的一些内置函数
2022/04/11 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL