knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定
http://knockoutjs.com/documentation/attr-binding.html(Knockout官网文档)
1、text绑定
目的:text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用,但是你可以用在任何元素上。
例子:
参数:主参数:KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。如果参数是监控属性observable的,那元素的text文本将根据参数值的变化而更新,如果不是,那元素的text文本将只设置一次并且以后不在更新。如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。
其他参数:无。
注1:使用函数或者表达式来决定text值
如果你想要你的text更可控,那选择是创建一个依赖监控属性(dependent observable),然后在它的执行函数里编码,决定应该显示什么样的text文本。
例如:
现在,text文本将在“expensive”和“affordable”之间替换,取决于价格price怎么改变。
然而,如果有类似需求的话其实没有必要再声明一个依赖监控属性(dependent observable), 你只需要按照如下代码写JavaScript表达式就可以了:
结果是一样的,但我们不需要再声明依赖监控属性(dependent observable)。
注2 :关于HTML encoding
因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:
它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.
2、attr绑定
目的:attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。
结果是把超链接的href属性设为http://www.cnblogs.com/xuepei/,title属性设为我的博客园。
参数: 主参数:该参数是一个JavaScript对象,属性是你的attribute名称,值是该attribute需要应用的值。
如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。
其他参数:无。
注:应用的属性名字不是合法的JavaScript变量命名
如果你要用的属性名称是data-something的话,你不能这样写:
因为data-something 不是一个合法的命名。解决方案是:在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如,
3、visible绑定
knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定的更多相关文章
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...
- Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。
Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
原文:如何解决FormView中实现DropDownList连动选择时出现 "Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的 ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用
原文:Eval().XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用 “/vs2005”应用程序中的服务器错误.--------------------------- ...
- jQuery使用scrollTop获取div标签的滚动条已滚动高度(jQuery版本1.6+时,用prop()方法代替attr()方法)
$("#content").append('<div>' + data.msg + '</div>'+.'<br>');$('#content' ...
- Kendo MVVM 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
随机推荐
- Bone Collector
if(j>=w[i]) dp[i][j] = max(dp[i-1][j-w[i]]+v[i], dp[i-1][j]); else dp[i][j]=dp[i-1][j]; i 1 2 3 4 ...
- ASP.NET页面间数据传递的方法<转>
ASP.NET页面间数据传递的方法 作者: 灰色的天空2 来源: 博客园 发布时间: 2010-10-28 11:06 阅读: 822 次 推荐: 0 原文链接 [收藏] 摘要:本 ...
- Top Five Communication Skills for Project Managers
Research among project managers globally identifies top communication skills for leading teams. Lead ...
- iOS NSURLSession 下载
周五的时候,有个新的需求,要下载脚本,帮助玩家自动打怪,应该也是挂机的意思吧! 组长让我设计界面,让汤老师设计数据等.我觉得数据的挑战性更大一点,然后就接过来了. 自己还没有形成互联网思维,所以弄了一 ...
- Xcode插件管理
在使用Xcode的时候,公司同事使用/// 和//TODO 就能打出很多注释信息.虽然他们帮忙给我也装了,但是我却不知道怎么弄的.今天在家无聊,过来自己实践了一把. so easy. 1.我使用的是P ...
- Spring AOP 实现原理与 CGLIB 应用
https://www.ibm.com/developerworks/cn/java/j-lo-springaopcglib/ AOP(Aspect Orient Programming),也就是面向 ...
- Facial Detection and Recognition with opencv on ios
https://www.objc.io/issues/21-camera-and-photos/face-recognition-with-opencv/
- 30天,O2O速成攻略【8.15济南站】
活动概况 时间:2015年08月15日13:30-16:30 地点:山东大学凤岐茶社(山东大学中心校区北门18号楼东连廊一层) 主办:APICloud.蚁巡 网址:www.apicloud.com 费 ...
- [BS-24] UIImageView的contentMode属性
UIImageView的contentMode属性 所有的UIView都有个contentMode属性,UIImageView继承自UIView,我们在使用UIImageView时,经常要考虑这些 ...
- MVC项目实践,在三层架构下实现SportsStore-02,DbSession层、BLL层
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...