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綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
