Knockout 新版應用開發教程之"visible"綁定"visible" 綁定例子注意：用函數或者函數表達式去控制元素的可見性

用途

DOM元素的顯示或者隐藏是根據綁定的值來的，前提是将visible綁定給該元素

<a></a>

2

3

4

5

6

7

8

9

10

11

12

13

<code>&lt;div data-bind=</code><code>"visible: shouldShowMessage"</code><code>&gt;</code>

<code>    </code><code>You will see</code><code>this</code> <code>message only when</code><code>"shouldShowMessage"</code> <code>holds a</code><code>true</code> <code>value.</code>

<code>&lt;/div&gt;</code>

<code> </code> 

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>var</code> <code>viewModel = {</code>

<code>        </code><code>shouldShowMessage: ko.observable(</code><code>true</code><code>)</code><code>// Message initially visible</code>

<code>    </code><code>};</code>

<code>    </code><code>viewModel.shouldShowMessage(</code><code>false</code><code>);</code><code>// ... now it's hidden</code>

<code>    </code><code>viewModel.shouldShowMessage(</code><code>true</code><code>);</code><code>// ... now it's visible again</code>

<code>    </code><code>ko.applyBindings(viewModel);   </code>

<code>&lt;/script&gt;</code>

參數

主要參數

當這個參數是一個假值時（舉例來說，布爾值的false , 數值0，或者null,或者undefined），綁定時候設定你的元素的style.display是none,進而使之隐藏起來。這個優先級要高于CSS中定義的

當這個參數是一個真值時（舉例來說，布爾值是true,或者非空對象與數組），綁定時候移除你<code>display的值，從來顯示出來</code>

<code>注意：在CSS中你能配置任何display的風格（是以CSS的規則，比如display:table-row 在綁定之後也能很好的處理）</code>

如果參數是監控屬性observable的，那元素的visible狀态将根據參數值的變化而變化，如果不是，那元素的visible狀态将隻設定一次并且以後不在更新。

附加參數：無

你也能用JavaScript函數或者任意的函數表達式作為一個參數值。

如果你這樣做，KO将會運作這個函數或者函數表達式，并且用這個傳回的結果來處理元素的 可見性（顯示與隐藏）。

例如

<code>&lt;div data-bind=</code><code>"visible: myValues().length &gt; 0"</code><code>&gt;</code>

<code>    </code><code>You will see</code><code>this</code> <code>message only when</code><code>'myValues'</code> <code>has at least one member.</code>

<code>        </code><code>myValues: ko.observableArray([])</code><code>// Initially empty, so message hidden</code>

<code>    </code><code>viewModel.myValues.push(</code><code>"some value"</code><code>);</code><code>// Now visible</code>

<code>    </code><code>ko.applyBindings(viewModel);</code>

依賴：除KO核心類庫外，無依賴。

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/3195611.html，如需轉載請自行聯系原作者