if綁定目的
if綁定一般是格式是data-bind=if:attribute,if後所跟屬性或表達式的值應為bool值(也可以是非bool值，當非空字符串時則為真)，if綁定的作用與visible綁定的作用類似。可控制DOM的顯示與隱藏，不一樣的地方是，if綁定是物理刪除或添加DOM元素。
示例1
該例展示IF綁定的動態刪除添加DOM：
Display message
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的綁定方式，看起來更易懂，代碼更整潔。
以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之數據控制流if綁定和ifnot綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！