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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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实现邮件群发的源码
2013/06/18 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
python聊天程序实例代码分享
2013/11/18 Python
python2.7安装图文教程
2018/03/13 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
如何利用python查找电脑文件
2018/04/27 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
电子商务应届生自我鉴定
2014/01/13 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
调查研究项目计划书
2014/04/29 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书