KnockoutJs學習筆記（七）

if binding與visible binding相似。不一樣之處在於，包含visible binding的元素會在DOM中一直保存，而且該元素相應的data-bind屬性會一直保持，visible binding只是利用CSS來觸發元素的可見性。另外一方面，if binding是物理地增長或刪除包含它的元素，而且元素內的data-bind只有在判斷語句爲真時才生效。

下面是一個簡單的if binding的例子：

js部分：

1 var viewModel = {
2     displayMessage: ko.observable(false)
3 };
4 
5 ko.applyBindings(viewModel);

html部分：

1 <input type="checkbox" data-bind="checked: displayMessage" /> Display message
2 <div data-bind="if: displayMessage">The message.</div>

下面是另外一個if binding的例子：

js部分：

1 var viewModel = {
2     people: ko.observableArray([
3         { name: "Kazusa", friends: [ "Chiaki", "Charlie" ] },
4         { name: "Yuki", friends: null }
5     ])
6 };
7 
8 ko.applyBindings(viewModel);

html部分：

1 <ul data-bind="foreach: people">
2     <li>
3         Name: <span data-bind="text: name"></span>
4         <div data-bind="if: friends">
5             Friends: <span data-bind="text: friends"></span>
6         </div>
7     </li>
8 </ul>

頁面顯示效果以下：

以前已經提到，在if binding中，包含if binding的元素會依照判斷語句的真僞來決定本身是否出如今頁面中，若是判斷語句自己是一個observable，則每當該observable變化時，包含if binding的元素會被動態地添加或是移除，它自身其餘的data-bind也會隨之生效或是失效。

if binding也支持無容器的控制流語法，一個簡單的示例以下：

1 <ul>
2     <li>Item 1</li>
3     <!-- ko if: displayMessage -->
4     <li>Message</li>
5     <!-- /ko -->
6 </ul>

ifnot binding與if binding相似，只不過對判斷語句結果的判斷正好相反。這裏有一個須要注意的地方是，假設viewModel中有一個屬性displayMessage是一個observable，則data-bind= "ifnot: displayMessage"與data-bind= "if: !displayMessage()"的效果是同樣的。在咱們直接綁定observable的時候，咱們是不須要添加括號的（我的理解是由於這裏不涉及取或是更改observable的值，相應的判斷由KO本身去作），而在對observable進行取反操做時，因爲須要獲取observable的值，咱們在調用的時候是須要添加括號的。有的開發人員喜歡使用ifnot binding也是有這部分的緣由。