Написание виджетов jQuery: использование шаблонов


Я делаю мой первый крупный опыт разработки на jQuery. Это виджет для повторяющихся событий, и как таковой довольно сложный зверь. Полный код доступен на https://github.com/collective/jquery.recurrenceinput.js для тех, кто хочет проверить. Я ценю любые отзывы о любой части кода, поэтому каждый, кто захочет взглянуть на него, это было бы здорово.

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

У меня есть несколько больших фрагментов HTML и я использую шаблоны jQuery для этого. Мой вопрос на лучший способ включить эти шаблоны. В настоящее время я пользуюсь двумя разными способами, и ни один из них явно лучше, чем любой другой.

В одном случае я использую строковый литерал:

var OCCURRENCE_TMPL = ['<div class="recurrenceinput_occurrences"><hr/>',
    '{{each occurrences}}',
        '<div class="occurrence>',
            '<span class="date ${occurrences[$index].type}">',
                '${occurrences[$index].formatted_date}',
            '</span>',
            '<span class="action">',
                '{{if occurrences[$index].type === "rrule"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Exclude',
                    '</a>',
                '{{/if}}',
                '{{if occurrences[$index].type === "rdate"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Remove',
                    '</a>',
                '{{/if}}',
                '{{if occurrences[$index].type === "exdate"}}',
                    '<a date="${occurrences[$index].date}" href="#"',
                       'class="${occurrences[$index].type}" >',
                        'Include',
                    '</a>',
                '{{/if}}',
            '</span>',
        '</div>',
    '{{/each}}',
    '<div class="batching">',
        '{{each batch.batches}}',
            '{{if $index === batch.current_batch}}<span class="current">{{/if}}',
                '<a href="#" start="${batch.batches[$index][0]}">[${batch.batches[$index][0]} - ${batch.batches[$index][1]}]</a>',
            '{{if $index === batch.current_batch}}</span>{{/if}}',
        '{{/each}}',
    '</div></div>'].join('\n');

$.template('occurrence_tmpl', OCCURRENCE_TMPL);

ОК, так что строго это массив из строковых литералов, но это сделать JSLint счастлив. Затем я использую этот:

result = $.tmpl('occurrence_tmpl', data);
occurrence_div = form.find('.recurrenceinput_occurrences');
occurrence_div.replaceWith(result);

Это аккуратный и простой, но в результате получается много HTML встроенную. Один из шаблонов 219 строк... :-)

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

<script id="jquery-recurrenceinput-form-tmpl" type="text/x-jquery-tmpl" src="../src/jquery.recurrenceinput.form.js" ></script>

И я нагрузки, что HTML через AJAX, засунуть его в переменную и сделать шаблон:

    if ($.template.recurrenceinput_form === undefined) {
        $.ajax({
            url: $(conf.template.form)[0].src,
            async: false,
            success: function (data) {
                conf.template.form = data;
            },
            error: function (request, status, error) {
                alert(error.message + ": " + error.filename);
            }
        });
        $(conf.template.form).template('recurrenceinput_form');
    }

И затем я могу использовать это:

form = $.tmpl('recurrenceinput_form', conf);
overlay_conf = $.extend(conf.form_overlay, {});
form.overlay().hide();

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

Мнения на это добро, и еще более рады бы третий путь, который не будет отстойным. :-)



1254
6
задан 14 октября 2011 в 07:10 Источник Поделиться
Комментарии
3 ответа

Я думаю, что загрузка шаблонов через AJAX-это элегантное решение.

Идея использования