Объединение виджетов jQuery-UI с шаблонами jQuery?

Question

Я использую jQueryUI и jQuery-tmpl, но я считаю, что совет, который я ищу, достаточно широк, чтобы его можно было применить к любой библиотеке шаблонов.

Проблема в том, что в моем шаблоне часто будет виджет CRUD

<script id="some-widget-template">
<div class="some-widget">
 <input name="NameField"/>
 <button id="some-widget-save">Save</button>
</div>
</script>

Это оставляет меня с очень читаемым виджетом, я могу вернуться и отредактировать, и т. Д. За исключением того, что это некрасиво. Используя jQueryUI, я могу сделать кнопку очень красивой, но для этого нужен Javascript. Итак, в моем соответствующем контроллере Javascript мой код будет выглядеть так:

$("#some-widget-template")
        .render( arrayOfDataObjects )
        .appendTo("body");
$("#some-widget-save").button();

Для этого очень простого примера это работает отлично. Мой контроллер, однако, будет быстро загроможден тем большим количеством элементов, которые необходимо преобразовать. Также кажется, что это должно быть заботой движка представления / шаблонов, не говоря уже о наличии волшебных строк ("# some-widget-save"), которые ухудшают удобство сопровождения кода.

Какой лучший способ сделать это? Конечно, я не могу быть первым человеком, который столкнется с этой проблемой. Я взломал jquery-tmpl так, что перед возвратом объекта jQuery он будет сканировать элемент кнопки и, если встретит его, преобразовать его в соответствующий элемент кнопки. Это кажется медленным, так как придется обходить каждый элемент в шаблоне. Есть идеи?

Редактировать: я обнаружил, что при использовании CSS3, 90% моих проблем были устранены. При сборке браузеров, не поддерживающих CSS3, я использую фабричный метод.

Answer 1

Отказ от ответственности: впервые слышу о jQuery-tmpl, когда читаю ваш вопрос.

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

Вы можете включить в свою среду функцию инициализации пользовательского интерфейса, которая при вызове просматривает все элементы DOM, о которых вы говорите, а затем превращает их в виджеты пользовательского интерфейса jQuery. Поток пойдет что-то вроде ..

1. jQuery-tmpl выполняет преобразование всех ваших данных в соответствующий шаблонный вывод.
2. После того, как jQuery-tmpl запустил свой курс, выполняется вызов вашего метода создания экземпляров - скажем, "renderUI ()".

jQuery-tmpl выложит ряд структурированных элементов на основе ваших данных ...

<div class="some-widget">
    <input name="NameField"/>
    <button class="reset-button">reset</button>
    <button class="save-button">Save</button>
</div>

<div class="tabbed-widget">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

Метод создания экземпляров может выглядеть примерно так ...

function renderUI() {

    $('.some-widget > .save-button').button({/* options */});
    $('.tabbed-widget > ul').tabs({/* options */});
    /* ... continue any other types of widget instantiation ... */
}

Если вы создаете экземпляры элементов пользовательского интерфейса, выбранных по классу, а не по ID, вы можете поместить в документ столько, сколько хотите, и все они будут созданы "сразу", поскольку jQuery выберет все из них и примените к ним конструктор виджета пользовательского интерфейса.

Если вам нужно выполнить некоторый код предварительной обработки (например, jQuery-tmpl) до того, как эти виджеты будут созданы, вы можете инкапсулировать свою инициализацию виджетов и вызвать ее, как только вся обработка jQuery-tmpl закончится.

В любом случае, надеюсь, это поможет!

P.S. Может быть, это что-то, связанное с jQuery-tmpl (хотя я не могу понять, что), но похоже, что ваш виджет состоит из элементов DOM внутри тега скрипта. Что-то в этом мне кажется крайне нерегулярным; P