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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 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分页显示制作详细讲解
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python中的元类编程入门指引
2015/04/15 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python中six模块基础用法
2019/12/08 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
英文版区域经理求职信
2013/10/23 职场文书
什么是岗位职责
2013/11/12 职场文书
美容师的职业规划书
2013/12/27 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
室外天线与收音机天线杆接合方法
2022/04/05 无线电
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js