【Knockout.js 学习体验之旅】（2）花式捆绑

本文是【Knockout.js 学习体验之旅】系列文章的第2篇，所有demo均基于目前knockout.js的最新版本（3.4.0）。小茄才识有限，文中若有不当之处，还望大家指出。

目录：

      【Knockout.js 学习体验之旅】（1）ko初体验

        【Knockout.js 学习体验之旅】（2）花式捆绑

Knockout.js 的花式捆绑

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

     

然而，并没有！

小茄第一时间想到的是 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一致，要去掉-改成驼峰命名，示范如下：

<!--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>

HTML Code