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 相关文章推荐
JS实现可改变列宽的table实例
Jul 02 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
js单页hash路由原理与应用实战详解
Aug 14 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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 和 HTML
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php创建sprite
2014/02/11 PHP
php实现json编码的方法
2015/07/30 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
元宵节晚会主持人串词
2014/03/25 职场文书
党员创先争优活动总结
2014/05/04 职场文书
学校校庆演讲稿
2014/05/22 职场文书
食品安全主题班会
2015/08/13 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS