Лучший способ упаковать несколько шаблонов jQuery в один xHttpRequest? - PullRequest
Новая
       25

Лучший способ упаковать несколько шаблонов jQuery в один xHttpRequest?

13 голосов
/ 11 декабря 2010

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

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

Используя библиотеки шаблонов jQuery , как лучше всего объединить несколько связанных, относительно небольших шаблонов вместе? Вам нужен один <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') );

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

Ответы [ 4 ]

4 голосов
/ 28 июня 2011

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

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

. Используя это, мы можем создать систему управления шаблонами javascript, которая позволяет нам загружать столько шаблонов одновременно, сколько мынужно, сохраняя DOM в чистоте.На клиенте храните хэш объектов шаблона по имени.Здесь вы можете использовать свой любимый шаблон 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 голосов
/ 11 февраля 2011

[Во-первых, отличный вопрос. Я люблю эту тему]

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

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

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

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

http://icanhazjs.com/

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

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

2 голосов
/ 05 января 2011

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

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

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

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

0 голосов
/ 28 июня 2011

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

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

...