如果不是
你可以使用 if
繫結來確定是否應建立節點的子元素。
<div class="product-info">
<h2> Product1 </h2>
<img src="../products/product1.jpg"/>
<span data-bind="if:featured">
<span class="featured"></span>
</span>
<span data-bind="ifnot:inStock">
<span class="out-of-stock"></span>
</span>
</div>
<script>
ko.applyBindings({
product: {
featured: ko.observable(true),
inStock: ko.observable(false)
}
});
</script>
if
繫結的反轉是 ifnot
<div data-bind="ifnot: someProperty">...</div>
相當於
<div data-bind="if: !someProperty()">...</div>
有時候,你不必控制元素的存在而不必建立一個容器(通常用於 <ul>
中的 <li>
元素或 <select>
內的 <option>
元素)
Knockout 使用基於註釋標籤的無容器控制流語法實現這一點,如下所示:
<select>
<option value="0">fixed option</option>
<!-- ko if: featured-->
<option value="1">featured option</option>
<!-- /ko -->
</select>