如果使用綁定來刪除元素，可以使用knockout.js嗎？

Question

假設我有以下HTML片段：

<div class="group-of-things"> 
    <span>thing #1</span> 
    <span>thing #2</span> 
    <span data-bind="if: showThing3">thing #3</span> 
</div> 

現在假設我有一個回合就group-of-things的最後一個子角的CSS：

.group-of-things > *:last-child { border-radius: 0 5px 5px 0 } 

的問題是，當showThing3變成假的 - thing #3被隱藏（內容被刪除），但包含（第三個）span保留在DOM中，因此thing #2確實不是得到圓角。

這可以通過使用無容器綁定（<!-- ko if: showThing3 -->）來解決，但我想避免使用無容器綁定，因爲註釋被我無法控制的管道剝離。

也許可以調整CSS規則來僅考慮可見的孩子（例如，我可以使用css綁定在隱藏元素上添加hidden類）。

是否有一個更優雅的解決方案，實際上會從DOM中刪除span問題？

Answer 1

我answered通過暗示Knockout-Repeat binding，它適用的結合元件本身類似的問題。在運行時，它將元素包裝在一個虛擬的（基於註釋的）元素中。

var vm = { 
 
    showThing3: ko.observable(true) 
 
}; 
 

 
ko.applyBindings(vm); 
 

 
setTimeout(function() { 
 
    vm.showThing3(false); 
 
}, 2500);

.group-of-things > * { color: white; padding: 2px; background: blue; } 
 
.group-of-things > *:last-child { border-radius: 0 5px 5px 0 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 
 
<script src="https://rawgit.com/mbest/knockout-repeat/master/knockout-repeat.js"></script> 
 

 
<div class="group-of-things"> 
 
    <span>thing #1</span> 
 
    <span>thing #2</span> 
 
    <span data-bind="repeat: showThing3() && 1">thing #3</span> 
 
</div>

Answer 2

一個綁定，可以刪除它所連接的元素將不會很有用，因爲它無法將自己添加回來。通常情況下，您可以通過使用無容器綁定來解決此問題。但是，如果這不是一個選項，你必須有創意。

• 您可以嘗試將您的模板作爲一個JavaScript字符串與 browserify一起存儲。當時懷疑這條管道能夠搞砸了。 類似 readFileSync 可以用來做到這一點。敲除甚至有這種方法的 example 。
• 您可以創建一個自定義綁定，您將把它放在 組事物div上。它會手動添加/刪除「東西＃3」 範圍。

Answer 3

爲什麼不使用可觀察數組的東西？

<div data-bind="foreach: things" class="group-of-things"> 
    <span data-bind="text: $data"></span> 
</div> 

<script> 
    model.things = ko.observableArray(["thing #1", "thing #2", "thing #3"]); 
    ... 
    model.things.remove("thing #3");