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

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

前言&基础

从本章开始，我们来逐一学习一下ko给我们准备好的内置绑定，这些Binding能够帮助我们完成大部分日常开发的需求，今天我们先学习2个：

• Visible绑定
• 使用Js Expression(表达式)进行绑定

Visible Binding(可见性绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的可见性，直接影响元素的display样式属性。
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

Javascript Expression Binding(js表达式绑定)

表达式绑定是一个ko里常用的绑定方法：

• 目前为止我们演示的Binding值都是一个observable或者computed
• ko也支持直接在绑定的时候指定一个表达式来代表一个值,比如A<2(代表一个bool值),B==3?3:4(代表3或4)

实例讲解：Visible Binding结合js表达式绑定

基本语法

1、使用Visible Binding

Html代码

<div data-bind="visible: shouldShowMessage">
    当"shouldShowMessage" 变量的值为true的时候.你能看到这段内容，
</div>

Js代码

 var viewModel = {
        shouldShowMessage: ko.observable(true) // 初始化为true
    };
    viewModel.shouldShowMessage(false); // observable修改为false,Div变不可见
    viewModel.shouldShowMessage(true); // 为true则Div可见

2、使用js表达式代替observable实现绑定

Html代码

<div data-bind="visible: myValues().length > 0">
   当 'myValues' 里的元素个数大于0时，div可见
</div>

js代码

 var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible

 

Demo1：演示Visible Binding基本用法

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

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

Demo2：演示Js Expression充当绑定值

http://jsfiddle.net/wbpmrck/xKZG7/3/embedded/

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

总结

今天的内容应该比较简单，主要介绍了ko中的Visible Binding用法，以及使用javascript表达式充当绑定值的技巧，都是ko中非常常用的技巧。

感谢支持

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