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 巧妙去除数组中的重复项
Jan 25 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js canvas实现擦除动画
Jul 16 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 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 intval的测试代码发现问题
2008/07/27 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python读取网页内容的方法
2015/07/30 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python中判断文件结束符的具体方法
2020/08/04 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Hotels.com中国区:好订网
2016/08/18 全球购物
中层干部岗位职责
2013/12/18 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
建筑投标担保书
2014/05/20 职场文书
小学语文业务学习材料
2014/06/02 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript