Javascript MVVM模式前端框架—Knockout 2.1.0系列

2012-06-06 10:44 by 刺客之家, 794 visits, 收藏 , 编辑

*本文已经同步至索引目录： 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基本用法
看不到内嵌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基本用法
看不到内嵌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基本用法
看不到内嵌Demo的点这里查看在线Demo
总结
今天主要介绍了ko中的CSS Binding、Style Binding和Attr Binding用法，至此，和文本与样式有关的内置绑定就介绍完了。这些绑定都是非常基础的功能，在日常开发过程中也是经常使用的，结合ko.observable和computed来使用，可以大大简化我们的代码结构，提高工作效率。

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

本博客文章若非标记转载，均为原创，转载请注明出处 ~

分类: [B1]Knockout.js

标签: knockout.js , MVVM

作者： Leo_wl
　　　　
出处： http://www.cnblogs.com/Leo_wl/
　　　　
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息

查看更多关于Javascript MVVM模式前端框架—Knockout 2.1.0系列的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48875

更新时间：2022-09-24 阅读：56次