Построение динамического списка радиокнопок в jQuery Mobile, но без получения событий кликов - PullRequest
Новая
       13

Построение динамического списка радиокнопок в jQuery Mobile, но без получения событий кликов

1 голос
/ 23 марта 2012

Я использую jQMobile 1.0 и динамически формирую список переключателей на основе данных json, возвращаемых из API.

Мне удалось заставить их отображаться (в основном), как и ожидалось, с помощью шаблонов содержимого fieldset out с той же разметкой, которую генерирует jqMobile из статических меток и переключателей: 

<script id="shows-list" type="text/x-jquery-tmpl">
    <div class="ui-radio">
    <input type="radio" name="activeShow" id="activeShow${showID}" value="${showID}">
        <label for="activeShow2" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-radio-off">
            <span class="ui-btn-inner" aria-hidden="true">
                <span class="ui-btn-text">
                    <h2>${showname}</h2>
                    <p>${opendate} &mdash; ${closedate}</p>
                </span>
                <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span>
            </span>
        </label>
    </div>
</script>

А вот код, который использует шаблон и обновляет содержимое страницы: 

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');
    $("#shows-list")
        .tmpl( data )
        .appendTo("#showChooser .ui-controlgroup-controls");
}

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

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

renderSettingsShowsList: function ( data ) {
    //save reference to existing click handler so we can re-apply it
    var clk = $("#showChooser label:first").data("events").click[0].handler;

    $("#showChooser").empty().append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    var newContent = $("#shows-list").tmpl( data ).find("label").each(function(){
        $(this).click(clk);
    });

    newContent.appendTo("#showChooser .ui-controlgroup-controls");
}

Я также пытался запустить $("#settings").page() после установки новой разметки (в последней строке renderSetingsShowsList, но, похоже, это не дает никакого эффекта.

Есть ли санкционированный метод выполнения того, что я пытаюсь сделать, чтобы jQuery Mobile делал свои улучшения, или мне придется каким-то образом взломать его вместе?

1 Ответ

0 голосов
/ 23 марта 2012

Это своего рода «взломанное» решение, которое я придумал. Это работает, но я бы хотел знать, есть ли лучший способ. 

renderSettingsShowsList: function ( data ) {
    $("#showChooser")
        .empty()
        .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>');

    $("#shows-list").tmpl( data ).appendTo("#showChooser .ui-controlgroup-controls");

    //assign click handler to new form controls to do everything we need it to
    $('#showChooser input:radio').click(function(e) {

        //mark all as not selected
        $("#showChooser input:radio").prop('checked', false);
        $("#showChooser label")
            .attr('data-theme','c')
            .removeClass('ui-btn-up-e')
            .addClass('ui-radio-off')
            .removeClass('ui-radio-on')
            .find(".ui-icon")
                .addClass('ui-icon-radio-off')
                .removeClass('ui-icon-shadow')
                .removeClass('ui-icon-radio-on');

        //style selected option
        var radio = $(this),
            label = radio.next();
        radio.prop('checked', true);
        label.attr('data-theme','e')
            .addClass('ui-btn-up-e')
            .removeClass('ui-radio-off')
            .addClass('ui-radio-on')
            .find(".ui-icon")
                .removeClass('ui-icon-radio-off')
                .addClass('ui-icon-shadow')
                .addClass('ui-icon-radio-on');

    });
}
...