Question

假设我有以下HTML代码段：

<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变为false时隐藏thing #3（内容被删除），但包含（第三个）span仍保留在DOM中，因此{{ 1}} 不得到圆角。

这可以通过使用无容器绑定（thing #2）来解决，但我想避免使用无容器绑定，因为注释被我无法控制的管道剥离。

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

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

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

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

Answer 3

可以删除它附加的元素的绑定不会非常有用，因为它无法自行添加。通常，您可以使用无容器绑定来解决此问题。但是，如果这不是一个选项，你必须发挥创意。

您可以尝试将模板存储为javascript字符串 browserify。怀疑这个管道是否能够解决它。就像是 readFileSync 可以用来做到这一点。淘汰赛甚至有一个 example 这种做法。
您可以创建一个自定义绑定事物分组它会手动添加/删除“＃3” 跨度。

如果绑定用于删除元素，可以knockout.js吗？

3 个答案: