Knockout.Js官網學習（visible綁定）

前言

讓visible綁定到DOM元素上，使得該元素的hidden或visible取決於綁定的值。

簡單的綁定

 首先仍是先定義一個ViewModel 

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  ///初始化的時候div是visible的     
    };
    
    AppViewModel.shouldShowMessage = ko.observable(false);   ///如今hidden勒
    ko.applyBindings( AppViewModel);

而且經過ko.applyBindins進行激活Knockout。

而後定義一個UI界面元素

<div data-bind="visible:shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

運行以後此div在初始化的時候仍是顯示的能夠，以後就被從新賦值爲false,致使此div被隱藏掉了。

參數：

當參數設置爲一個假值時（例如：布爾值false， 數字值0， 或者null， 或者undefined） ,該綁定將設置該元素的style.display值爲none，讓元素隱藏。它的優先級高於你在CSS裏定義的任何display樣式。

當參數設置爲一個真值時（例如：布爾值true，或者非空non-null的對象或者數組） ,該綁定會刪除該元素的style.display值，讓元素可見。而後你在CSS裏自定義的display樣式將會自動生效。

若是參數是監控屬性observable的，那元素的visible狀態將根據參數值的變化而變化，若是不是，那元素的visible狀態將只設置一次而且之後不在更新。

使用函數或者表達式來控制元素的可見性

你也能夠使用JavaScript函數或者表達式做爲參數。這樣的話，函數或者表達式的結果將決定是否顯示/隱藏這個元素。例如：

<script type="text/javascript">
    var AppViewModel = {
        shouldShowMessage: ko.observable(true),   ///初始化的時候div是visible的
        myValues: ko.observableArray([])         
    };
    
    AppViewModel.shouldShowMessage = ko.observable(false);   ///如今hidden勒
    AppViewModel.myValues.push("some value");                   ///向myValues數組中 添加一個項
    ko.applyBindings( AppViewModel);
</script>

在ViewModel中添加了一個myValues的屬性值

同時給myValues的數組添加了一個項

而且在頁面UI中綁定了一個元素

<div data-bind="visible: myValues().length > 0">    
　　You will see this message only when 'myValues' has at least one member.
</div>

就這樣當添加完"some value"元素以後，myValues().length>0 則結果爲true 

那麼此div就會顯示出來。

導航

 1.KnockoutJs官網學習（簡單瞭解和入門） 

 2.Knockout.Js官網學習（監控屬性Observables）

 3.Knockout.Js官網學習(數組observable)