2012-02-14 6 views
0

У меня есть элемент списка в шаблоне, который использует «видимый» связывание, а также пользовательские привязки на тот же элемент:KnockoutJS - Комбинированные привязки переопределяют друг друг

<li data-bind="visible: (Applicable == 'All'), highlight: Selected().indexOf('false',0) == -1"> 

Это проверяет каждый связанный член зрения и если у него есть значение «Все» для свойства «Применимое», сделайте элемент списка видимым.

Я также использую настраиваемую привязку для применения класса к элементу списка, зависящему от того, содержит ли свойство «Selected» связанного элемента строка «false».

ko.bindingHandlers.highlight = { 
     update: function (element, valueAccessor, viewModel) { 
      var value = valueAccessor(); 
      ko.utils.unwrapObservable(value) ? $(element).addClass("selected", 1000) : $(element).removeClass("selected", 1000); 
     } 
    }; 

Проблема заключается в том, что «изюминка» пользовательские привязки кажется переопределить/заменить видимые связывания и элементы списка, которые были скрыты от Visible связывания вновь появляется, когда гвоздь связывание происходит. Кажется, что видимое связывание выполняется, тогда привязка выделения выполняется и игнорирует результат видимой привязки.

Надеюсь, я объяснил это ОК.

Могу ли я объединить функциональность видимого связывания в мою собственную привязку, чтобы я вызывал только одно событие привязки, которое определяет, должен ли элемент списка быть видимым или скрытым или видимым плюс выделение?

+0

Вы, безусловно, можете комбинировать два привязки, если вам нужно. Однако вам может быть полезно воспроизвести вашу проблему в jsFiddle. Вы можете использовать его: http://jsfiddle.net/rniemeyer/dJxRW/ –

+0

Привет, Райан, я попытаюсь воспроизвести проблему в JS Fiddle, как вы предлагаете. Я думаю, для меня будет хорошо работать над проблемой. Честно говоря, я упростил пример, чтобы было легче написать вопрос, и ваша скрипка показала, что мой основной пример должен работать. Теперь я исправил скрипт, чтобы добавить в «maxPersonAge» вычисленный наблюдаемый, который возвращает максимальный возраст в 2 человека, и я хочу, чтобы тогда отображались только элементы списка, где свойство MaxAge меньше, чем maxPersonAge. Однако я уже получаю сообщение об ошибке: «Сообщение: ReferenceError: maxPersonAge не определено». – BrightonDev

+0

Просто понял, как работает JSFiddle. URL-адрес моей измененной страницы: http://jsfiddle.net/FloatLeft/dJxRW/11/ – BrightonDev

ответ

0

Вместо обработчика привязки вы можете рассмотреть возможность использования вычисленного наблюдаемого, чтобы определить, следует ли добавлять класс css или нет. В фрагменте кода ниже значения isSelected вычисляется наблюдаемое значение.

<li data-bind="visible: applicable === 'all', css: {selected: isSelected}"> 

Предоставлено, что я не знаю точно, что делает ваш код, поскольку мы не можем его увидеть. Но это один из вариантов. Другой - написать обработчик привязки, чтобы сделать все это, как вы предлагаете.

+0

Привет, Джон, ты прав. Ваше предложение обходит мою проблему с привязкой. Хотя я теряю постепенное применение и удаление класса. Theres obviosly что-то не так с моим кодом, который вызывает проблему, о которой я упоминал выше, поэтому я собираюсь попытаться перестроить ее настолько, насколько могу, в скрипке. – BrightonDev