Нокаут для отображения только если свойство = значение?

Question

Первоначально я имел что-то вроде следующего:

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

Это технически работал, но на самом деле создал DOM элемент для каждого объекта, независимо от типа, но согласующие из них были единственными «заселенных». Он оставил небольшие пробелы в пользовательском интерфейсе.

Я перешел на использование виртуального элемента, который работает намного лучше, но все еще показывает вверх в DOM в

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

для всех nonmatching элементов.

Есть ли способ вставить оператор if в исходный файл foreach или было бы лучше сделать эту логику в viewmodel каким-то образом?

Answer 1

Вы не можете вставлять if в тот же элемент, что и foreach, потому что они пытаются контролировать одно и то же привязку потомка, что является ошибкой, которую вы получите при запуске нокаутом.

http://jsfiddle.net/h92LY/

Использование containerless связывания составляет 100% правильное направление идти. Другой вариант заключается в использовании вычисляемого где условие внутри него, но принимает логику представления в модели представления -

вид модели -

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

вид -

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