Связывание видимости с выражением в нокауте

У меня есть серия изображений, и я хочу, чтобы каждый из них был видимым одновременно, на основе наблюдаемого свойства на моей модели просмотра.

То, что я хотел бы иметь, выглядит примерно так:

<img src="a.jpg" data-bind="visible: type == 'a'" />
<img src="b.jpg" data-bind="visible: type == 'b'" />
<img src="c.jpg" data-bind="visible: type == 'c'" />

...

Где 'type' - это просто свойство ko.observable на моей модели viewModel. Указанное связывание не работает, когда изменяется значение 'type'. Обходной путь, который у меня есть, состоит в том, чтобы сделать зависимым для каждого потенциального типа следующим образом:

viewModel.isA = ko.dependentObservable(function(){
    return this.type() == 'a';
}, viewModel);

Это работает, но это приводит к тому, что мой код становится довольно большим. Я чувствую, что привязка выражения должна работать, и я, возможно, просто немного отключил синтаксис. Есть ли чистый способ сделать это?

ОТВЕТЫ

Ответ 1

Ответ Sean корректен в отношении синтаксиса типа в вашей привязке.

Однако, если вас беспокоит, что вы создаете слишком много dependObservables и не хотите полного выражения в вашей привязке, тогда вы можете использовать простую функцию. Связывание KO внутренне выполняется внутри зависимых функций, поэтому любые наблюдаемые, которые доступны для доступа, создадут зависимость для этой привязки. Это означает, что вы можете создать такую ​​функцию, как:

viewModel.isType = function(type) {
  return type === this.type();
};

Затем вы можете использовать его как: (также привязка называется visible, а не visibility)

<img src="a.jpg" data-bind="visible: isType('a')" />
<img src="b.jpg" data-bind="visible: isType('b')" />
<img src="c.jpg" data-bind="visible: isType('c')" />

Вот пример: http://jsfiddle.net/rniemeyer/kbC2k/

Ответ 2

При доступе к данным в нетривиальном выражении Knockout data-bind вам нужно вызвать наблюдаемое как функцию, чтобы получить базовое значение:

<img src="a.jpg" data-bind="visible: type() == 'a'" />
<img src="b.jpg" data-bind="visible: type() == 'b'" />
<img src="c.jpg" data-bind="visible: type() == 'c'" />

Однако, если вы используете множество нетривиальных выражений в ваших атрибутах data-bind, вам, вероятно, лучше создать настраиваемую привязку.