Как выборочно привязать атрибуты в Knockout

Я хочу установить разные атрибуты темы данных в зависимости от состояния модели\объекта. Здесь я просто устанавливаю «b» или «d» для атрибута темы данных (jQuery Mobile). Я могу заставить его работать с:

<!-- ko if: $data.id() == $parent.selectedMatchId() -->
    <li data-bind="text: $data.date" data-theme="b"></li>
<!-- /ko -->
<!-- ko ifnot: $data.id() == $parent.selectedMatchId() -->
   <li data-bind="text: $data.date" data-theme="d"></li>
<!-- /ko -->

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

<li data-bind="text: $data.date,
      attr: {'data-theme' : $data.id() == $parent.selectedMatchId() : 'd' ? 'b'}"></li>

Есть ли более чистый способ сделать это, чем «ко, если» и «ко, если нет», которые я использую?


javascript binding attributes knockout-2.0
person Pablo    schedule 07.03.2012    source источник
comment
Ваш 2-й блок кода имеет неверный троичный код, который будет препятствовать правильной работе привязки: ` ... : 'd' ? 'b'` должно быть `... ? 'д' : 'б'`.   -  person Scott Rippey    schedule 16.05.2013

Ответы (2)


arrow_upward
2
arrow_downward

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

Документация находится здесь: http://knockoutjs.com/documentation/template-binding.html#note_4_dynamically_choosing_what_template_is_used

person Charles    schedule 07.03.2012

arrow_upward
0
arrow_downward

Я предпочитаю использовать пользовательскую привязку, которая изменяет мою мобильную тему jquery. Например, изменение темы кнопки на основе наблюдаемого значения true или false, чтобы указать, выбрана кнопка или нет:

Пользовательская привязка:

ko.bindingHandlers.jqmButtonTheme = {
    init: function (element, valueAccessor)
    {
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).buttonMarkup({ theme: 'b' }) : $(element).buttonMarkup({ theme: 'a' });
    },
    update: function (element, valueAccessor)
    {
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).buttonMarkup({ theme: 'b' }) : $(element).buttonMarkup({ theme: 'a' });
    }
};

Пример JSFiddle:

http://jsfiddle.net/RVLqJ/10/

person Gaff    schedule 11.02.2013