Как выборочно связать атрибуты в нокауте - PullRequest
Новая
       20

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

3 голосов
/ 07 марта 2012

Я хочу установить разные атрибуты темы данных в зависимости от модели \ состояния объекта.Здесь я просто устанавливаю '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>

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

Ответы [ 2 ]

2 голосов
/ 07 марта 2012

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

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

0 голосов
/ 11 февраля 2013

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

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

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/

...