KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定

更新時(shí)間：2016年10月10日 11:55:47 作者：SmallProgram

這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定的相關(guān)資料,需要的朋友可以參考下

if綁定目的

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

示例1

該例展示IF綁定的動(dòng)態(tài)刪除添加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

該示例中，通過(guò)foreach綁定循環(huán)planets監(jiān)控屬性數(shù)組，其中name為Mercury的項(xiàng)目中capital為null，則循環(huán)中該項(xiàng)目只顯示其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>

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

像之前的虛擬綁定一樣，同樣使用和進(jìn)行。虛擬綁定適用于不改變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綁定的逆向表達(dá)，格式與if綁定一樣，只是判斷結(jié)果與if整好相反。就像等于和不等于一樣。例如：

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

其等效寫(xiě)法為：

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

有人會(huì)說(shuō)使用if綁定是足夠了。為毛還要ifnot綁定。原因是有很多強(qiáng)迫癥患者喜歡這種ifnot的綁定方式，看起來(lái)更易懂，代碼更整潔。

以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: