如果使用绑定来删除元素，knockout.js 可以吗？答案

【问题标题】：Can knockout.js if binding be used to remove the element?如果使用绑定来删除元素，knockout.js 可以吗？
【发布时间】：2015-11-04 10:23:09
【问题描述】：

假设我有以下 HTML sn-p:

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

现在假设我有一个 CSS 可以在 group-of-things 的最后一个孩子上圆角：

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

问题是，当showThing3 变为假时 - thing #3 被隐藏（内容被删除），但包含（第三个）span 仍保留在 DOM 中，因此 thing #2 不会得到圆角。

这可以通过使用无容器绑定 () 来解决，但我想避免使用无容器绑定，因为我无法控制的管道正在剥离 cmets。

也许可以调整 CSS 规则以仅考虑可见的子元素（例如，我可以使用 css 绑定在隐藏元素上添加 hidden 类）。

是否有更优雅的解决方案可以真正从 DOM 中删除有问题的 span？

【问题讨论】：

标签： knockout.js

【解决方案1】：

为什么不使用可观察的数组？

<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" );

【讨论】：

我为演示目的简化了代码。您的回答对于我所问的内容是有效的。实际代码有异构列表。

【解决方案2】：

我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>

【讨论】：

这是一个很好的解决方案。我希望 OOB if 会这样做。我认为if当前的语义是反直觉的，许多开发人员期望if-ed元素会被控制，而不是元素的内容。

【解决方案3】：

可以删除它所附加的元素的绑定不会很有用，因为它无法将自己添加回来。通常，您可以通过使用无容器绑定来解决此问题。但是，如果这不是一个选项，您就必须发挥创造力。

您可以尝试将模板存储为 javascript 字符串浏览器化。怀疑这个管道会不会弄乱它。就像是 readFileSync 可以用来做到这一点。淘汰赛甚至有一个 example 这种方法。
您可以创建一个自定义绑定，将其放在事物组 div。它将手动添加/删除“事物#3” 跨度。

【讨论】：