Лучший способ пакетного размещения нескольких шаблонов jQuery в одном xHttpRequest?

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

Я все равно хотел бы услышать о любых дополнительные мысли об этом. статья, связанная выше, требует, чтобы Возвращенная строка шаблонов вставлен в DOM. Кажется, как будто оставляя DOM из этого, было бы идеал и меньше накладных расходов на браузер. Представьте себе большую страницу, с несколько составных шаблонов, которые могут не привыкать. Хотя, может быть, потому, что шаблоны завернуты в scriptтег, для каждого шаблона есть только один элемент DOM? Давай, давай услышать некоторые мысли...

Используя jQuery template libs, какой лучший способ объединить несколько связанных, относительно маленьких шаблонов? Вам нужен один тег <script> для каждого отдельного шаблона? Как насчет динамического вытягивания этих шаблонов через AJAX? Могу ли я объединить эти шаблоны?

Рассмотрим следующее:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}}
    <tr class="detail"><td>Director: ${Director}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr>
</script>

Теперь, поскольку эти два шаблона очень тесно связаны (и один зависит от другого), имеет смысл объединить их в один вызов AJAX и получить их оба сразу. У меня есть несколько идей, но я хотел бы знать, есть ли общий/лучший способ сделать это? В настоящее время я втягиваю кусок HTML, а затем делаю .find(), чтобы получить конкретный фрагмент HTML для шаблона... например:

var templatePackage = fancyAjaxCalltoGetTemplates();

"templatePackage" может выглядеть следующим образом:

<div id="templatePkg"> 
    <div id="movieTemplate">
    {{tmpl "#titleTemplate"}}
      <tr class="detail"><td>Director: ${Director}</td></tr>
    </div>    

    <div id="titleTemplate">
    <tr class="title"><td>${Name}</td></tr>
    </div>
</div>

Тогда я мог бы сделать:

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate') );

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate') );

... дайте мне знать, что вы думаете... что бы вы сделали?

Ответы

Ответ 1

Мне нравится ссылка на статью в вашем обновлении, за исключением предположения, что вы не можете кэшировать шаблоны, если вы не вставляете их в DOM. Из jQuery.tmpl документации,

"Чтобы кэшировать шаблон при использовании разметки, полученной из строки (а не из встроенной разметки на странице), используйте $.template( name, markup ) для создания именованного шаблона для повторного использования. См. jQuery.template()".

Используя это, мы можем создать систему управления шаблонами javascript, которая позволяет нам загружать столько шаблонов за один раз, сколько нам нужно, сохраняя DOM clean. На клиенте сохраните хэш объектов шаблона по имени. Вы можете использовать свой шаблон javascript на основе избранного объекта, но я бы подумал, что структура может быть такой:

templates[templateName] = {
    templateMarkup: markupFromServer,
    loadedAt: Date.now(),
    compiledTemplateFunction: jQuery.template( templateName, markupFromServer )
}

Затем используйте шаблоны для генерации HTML следующим образом:

templates['unique-name'].compiledTemplateFunction(inputData)

Затем создайте механизм разгрузки для освобождения памяти:

function unload(templateName) {
    delete templates[templateName];
    delete jquery.template[templateName];
}

Самое главное, теперь у вас есть способ хранения нескольких шаблонов, чтобы вы могли делать такие запросы, как: $.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess) для загрузки нескольких шаблонов за раз. Единственное, что нам нужно - это контроллер TemplateManagement, который возьмет массив имен шаблонов в качестве ввода и возвращает JSON, который связывает имя шаблона с его разметкой. Есть несколько способов сделать это, но мне кажется, что наиболее удобным является определение частичных представлений для каждого шаблона. В ASP.NET MVC 3 вы можете использовать этот метод и RenderPartial, чтобы испускать каждую разметку шаблона в ответ JSON. Вы можете либо называть частичные представления так же, как и шаблоны, или сопоставлять имена по-своему.

Ответ 2

Хорошо, я прочитал статью, которую вы ссылаетесь в этом сообщении. Как я вижу, его путь, вероятно, является одним из лучших способов загрузки шаблонных страниц. Единственное, что мне не нравится, это асинхронные проблемы, которые могут возникнуть, особенно. если вам нужно немедленно сделать некоторые шаблоны до того, как async получит возврат... плюс любые связанные проблемы, которые могут произойти до того, как он что-то вернет. В нескольких проектах, которые я сделал, я использую его "древний" SSI (включая серверную часть), но я просто использую что-то еще проще:

<% Response.WriteFile("this_page_template_file.html"); %>

Вы можете поместить его куда угодно, где бы вы разместили тег. Как он говорит, просто вставьте только те шаблоны, которые вам нужны, или, возможно, включите два шаблона: один - это "базовый" шаблон с обычно используемыми элементами, а второй - страницы с конкретными ссылками с шаблонами {{tmpl}}.

Это даже близко к ответу?; -)

Ответ 3

[Во-первых, отличный вопрос. Мне нравится эта тема]

У меня нет опыта работы с плагином "jquery-template-libs", но есть специальные легкие плагины javascript-шаблонов, которые становятся почти стандартом и отлично сочетаются с jQuery, что, вероятно, лучше подходит для задачи, чем JTL, Усы:

https://github.com/janl/mustache.js

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

Кроме того, есть библиотека под названием ICanHaz.js:

http://icanhazjs.com/

ICanHaz по существу расширяет Усы, чтобы включить встроенную функциональность для шаблонов и работает невероятно хорошо.

Усы/ICanHaz позволяют добавлять шаблоны по переменной, с помощью json-вызова или с помощью тегов. Выбор за вами.

Ответ 4

Я знаю, что это старый вопрос, но вы можете взглянуть на Closure-Templates. Они предоставляют вам функциональность, с дополнительным преимуществом компиляции в JavaScript во время компиляции, а не во время выполнения в каждом пользовательском браузере.

Если вы решите изучить их использование, я бы предложил использовать plovr для их создания.