你的位置:首页 > 软件开发 > Java > 【Knockoutjs 学习体验之旅】(2)花式捆绑

【Knockoutjs 学习体验之旅】(2)花式捆绑

发布时间:2016-06-07 10:00:19
本文是【Knockoutjs 学习体验之旅】系列文章的第2篇,所有demo均基于目前knockoutjs的最新版本(3.4.0)。小茄才识有限,文中若有不当之处,还望大家指出。目录: 【Knockoutjs 学习体验之旅】(1)ko初体验 ...

【Knockoutjs 学习体验之旅】(2)花式捆绑

本文是【Knockoutjs 学习体验之旅】系列文章的第2篇,所有demo均基于目前knockoutjs的最新版本(3.4.0)。小茄才识有限,文中若有不当之处,还望大家指出。

目录:

      【Knockoutjs 学习体验之旅】(1)ko初体验

        【Knockoutjs 学习体验之旅】(2)花式捆绑

Knockoutjs 的花式捆绑

提到捆绑,相信很多邪恶的筒子以为小茄第一时间想到的是:

 【Knockoutjs 学习体验之旅】(2)花式捆绑   【Knockoutjs 学习体验之旅】(2)花式捆绑 

然而,并没有!

小茄第一时间想到的是 data-bind = "value: price",data-bind = "text: sum",data-bind = "XX: OO"……(好吧,这有点用力过猛了)

言归正传,在上一篇文章(【Knockoutjs 学习体验之旅】(1)ko初体验)中提到,ko中的 data-bind = "XX:OO"绑定**除了可以绑定text、value等内容,还可以绑定visible、style等外观属性,也可以绑定click、textInput等各种事件,甚至还能控制程序流程。各种花式捆绑,绝对满足你的幻想。

下面简单讲讲各种绑定的使用,主要根据被绑定的属性分成表现类、流程类和交互类三种。

表现类属性

表现类的绑定属性有visible、text、html、css、style、attr几种,除了css表示css的class之外,其他都很好理解。当然了,style里面的命名要与js一致,要去掉-改成驼峰命名,示范如下:

【Knockoutjs 学习体验之旅】(2)花式捆绑【Knockoutjs 学习体验之旅】(2)花式捆绑
<!--HTML code--><div data-bind="visible: shouldShowMessage">You will see this message only when "shouldShowMessage" holds a true value.</div><div>Today's message is: <span data-bind="text: myMessage"></span></div><div data-bind="html: details"></div><div data-bind="css: { profitWarning: currentProfit() < 0 }">CSS class binding test</div><div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">CSS style binding test</div><a data-bind="attr: { href: url, title: urltitle }">Report</a>

原标题:【Knockoutjs 学习体验之旅】(2)花式捆绑

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。