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中非常常用的技巧。

感謝支持

如果本文對您有幫助的話，請別吝嗇手中的推薦票哦~