Knockout foreach仅在property=value时显示

Question

我最初有这样的东西：

<span data-bind="foreach: objects">
    <span data-bind="if: object.type() === 'menuItem'>
       ...
    </span>
</span>

这在技术上是可行的，但它实际上为每个对象创建了一个DOM元素，无论类型如何，但匹配的对象是唯一"填充"的对象。它在UI中留下了一些细微的空白。

我转而使用虚拟元素，它的效果要好得多，但在DOM中仍然显示为

<!-- ko if: object.type() === 'menuItem'>
<!-- /ko -->

对于所有不匹配的元件。

有没有办法将if语句嵌入到原始foreach中，或者在视图模型中以某种方式执行此逻辑会更好？

Answer 1

不能将if嵌入到与foreach相同的元素中，因为它们试图控制相同的子体绑定，这是Knockout在尝试时会给您的错误。

http://jsfiddle.net/h92LY/

使用无容器绑定是100%正确的方向。另一种选择是在条件所在的地方使用计算的，但这是将表示逻辑带入视图模型-

视图模型-

var showingObjects= ko.computed(function () {
    return ko.utils.arrayFilter(objects(), function(object) {
        return object.type() === 'menuItem';
    });
});

视图-

<span data-bind="foreach: showingObjects">
       ...
</span>