Использование внешних составных шаблонов jQuery - PullRequest
Новая
       8

Использование внешних составных шаблонов jQuery

4 голосов
/ 30 ноября 2010

Я хотел попробовать jQuery Templates после того, как меня вдохновили эти 2 сообщения в блоге

Ну, это не совсем работает для меня. Если у меня есть код шаблона на самой странице, он работает нормально, но удаленная загрузка не работает для меня. Похоже, что шаблон извлекается нормально. что здесь не так?

Внешний шаблон: 

<script id="contactsTemplate" type="text/x-jquery-tmpl">
  <table class="contacts">
    <thead><tr><td class="ui-helper-hidden">Id</td><td>Name</td><td>City</td><td>State</td></tr></thead>
    <tbody>
    {{each contact}}
        {{tmpl($value) '#contactTemplate'}}
    {{/each}}
    </tbody>
  </table>
</script>

<script id="contactTemplate" type="text/x-jquery-tmpl">
    <tr><td class="ui-helper-hidden">${id}</td><td>${name}</td><td>${city}</td><td>${state}</td></tr>
</script>

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

var contacts = {
    contact: [
        { id: 1, name: "John Green", city: "Orange Beach", state: "AL" },
        { id: 2, name: "Sam Thompson", city: "Pensacola", state: "FL" },
        { id: 3, name: "Mary Stein", city: "Mobile", state: "AL" }
    ]
};

$("#ShowDataRemote").button().click(function() {
    $.get('templates/Contact.htm', function(template) {
        alert(template);
        $.tmpl(template, contacts).appendTo("body");
        alert("async done");
    });
});
<ч />

Обновление:

Новое сообщение в блоге на Encosia объясняет этот вопрос и ответ ...

http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/

Ответы [ 2 ]

3 голосов
/ 30 ноября 2010

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

$("#ShowDataRemote").button().click(function() {
  $.get('templates/Contact.htm', function(template) {
    // Inject the template script blocks into the page.
    $('body').append(template);

    // Use those templates to render the data.
    $('#contactsTemplate').tmpl(contacts).appendTo("body");
  });
});
0 голосов
/ 16 октября 2012

Вы можете скомпилировать строку шаблона как «именованный шаблон», например, по этой ссылке: https://stackoverflow.com/a/4366280/1274343

...