KnockoutJS 3.X API 第四章 數據綁定(3) 控制流if綁定和ifnot綁定

if綁定目的

if綁定一般是格式是data-bind=if:attribute,if后所跟屬性或表達式的值應為bool值(也可以是非bool值，當非空字符串時則為真)，if綁定的作用與visible綁定的作用類似。可控制DOM的顯示與隱藏，不一樣的地方是，if綁定是物理刪除或添加DOM元素。

示例1

該例展示IF綁定的動態刪除添加DOM：

Display message

Here is a message. Astonishing.

UI源碼：

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
 
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>

視圖模型源碼：

ko.applyBindings({
    displayMessage: ko.observable(false)
});

示例2

該示例中，通過foreach綁定循環planets監控屬性數組，其中name為Mercury的項目中capital為null，則循環中該項目只顯示其name.

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
</ul>
 
 
<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null }, 
            { name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]
    });
</script>

備注：使用無容器的if綁定(if虛擬綁定)

像之前的虛擬綁定一樣，同樣使用<!-- ko -->和<!-- /ko -->進行。虛擬綁定適用於不改變UI元素的情況。

<ul>
    <li>This item always appears</li>
    <!-- ko if: someExpressionGoesHere -->
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>

ifnot綁定

ifnot綁定是if綁定的逆向表達，格式與if綁定一樣，只是判斷結果與if整好相反。就像等於和不等於一樣。例如：

<div data-bind="ifnot: someProperty">...</div>

其等效寫法為：

<div data-bind="if: !someProperty()">...</div>

有人會說使用if綁定是足夠了。為毛還要ifnot綁定。原因是有很多強迫症患者喜歡這種ifnot的綁定方式，看起來更易懂，代碼更整潔。