Javascript MVVM模式前端框架—Knockout 2.1.0系列(5)：文本和样式绑定(下篇)

*本文已经同步至索引目录：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

前言&基础

大家好，通过前面的一系列介绍和demo，相信大家已经对knockout的绑定有了感性的认识，通过内置的绑定，我们已经可以在页面上展示文本、html,并且与我们的viewModel对象实现双向更新了。

今天我们继续介绍其他的几个重要的文本和样式相关的内置绑定，他们分别是：

• css绑定
• style绑定
• attr绑定

CSS Binding(CSS类名绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的class属性(因此个人认为叫做class binding更直接一些)。
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的class名称
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Style Binding(Style属性绑定)

同样是用于控制样式，不过该绑定用于控制样式的细节：

• 控制DOM元素的Style属性，比如color,width等
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的Style属性
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Attr Binding(attr属性绑定)

这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：

• 控制DOM元素的任意属性，比如href等
• 会根据所绑定的bool值（或者可以返回bool值的js表达式），给元素 移除/添加 对应的属性
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

实例讲解：CSS Binding

基本语法

Html代码

<div data-bind="css: { myClass: enableMyClass }">
  some text
</div>

Js代码

var viewModel = {
        enableMyClass: ko.observable(false) //默认为false
    };
    viewModel.enableMyClass(true);//设为true,则div的class有效

 

Demo：演示CSS Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/1/embedded/

看不到内嵌Demo的点这里查看在线Demo

实例讲解：Style Binding

基本语法

Html代码

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>

Js代码

var viewModel = {
        currentProfit: ko.observable(150000) // 初始化，内容黑色
    };
    viewModel.currentProfit(-50); //div内容变为红色

Demo：演示Style Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/2/embedded/

看不到内嵌Demo的点这里查看在线Demo

实例讲解：Attr Binding

基本语法

Html代码

<a data-bind="attr: { href: url, title: details }">
    Report
</a>

Js代码

 var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("这段文本将会作为a标签的title")
    };

Demo：演示Attr Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/4/embedded/

看不到内嵌Demo的点这里查看在线Demo

总结

今天主要介绍了ko中的CSS Binding、Style Binding和Attr Binding用法，至此，和文本与样式有关的内置绑定就介绍完了。这些绑定都是非常基础的功能，在日常开发过程中也是经常使用的，结合ko.observable和computed来使用，可以大大简化我们的代码结构，提高工作效率。

感谢支持

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~