Как использовать jQuery для извлечения части динамически загружаемого шаблона усов - PullRequest
Новая
       6

Как использовать jQuery для извлечения части динамически загружаемого шаблона усов

1 голос
/ 04 марта 2012

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

<html>
<head>...</head>
<body>
  <table>
    <tbody id="#this">
      {{rows}}
      <tr>{{row}}<tr>
      {{/rows}}
    </tbody>
  </table>
</body>
</html>

Это прекрасно работает для моих шаблонов на стороне сервера. На стороне клиента, однако, у меня возникли некоторые проблемы. Я могу успешно загрузить шаблон, используя ajax, но мне не нужно все это для обновления строк таблицы. 

$(function () {
    var template;
    $.ajax('templates/thetemplate.mustache', {
        success : function (data) {
            template = $('#this', data).html();
        },
        dataType : 'html'
    });
});

Когда я использую вышеупомянутый jQuery для получения содержимого элемента #this, строки {{rows}} и {{/rows}} удаляются из результата, а <tr>{{row}}</tr> между ними возвращаются успешно. Как я могу получить все содержимое?

Я пробовал $('#this', data).contents();, который дает те же результаты, и $('#this', data).val();, который возвращает пустую строку. Использование $(data).find('#this') вместо этого дает те же три результата. Я также попытался установить dataType вызова ajax на 'text' без видимого эффекта.

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

Спасибо

Ответы [ 2 ]

0 голосов
/ 04 марта 2012

Проблема уже возникла на $('#this', data), который отправляет data через анализатор HTML браузера, чтобы преобразовать его в фрагмент DOM. Будучи устойчивым к ошибкам, анализатор HTML делает все возможное с шаблоном, но это не то, что вам нужно, поскольку сам шаблон не является допустимым HTML. По этой причине $('#this', data).anythingYouLike() или $(data).anythingYouLike() не будут работать.

Поскольку HTML-код должен быть действительным перед отправкой в ​​анализатор HTML-кода браузера, нет другого выбора, кроме как выполнять рендеринг усов перед отправкой действительного HTML-кода в браузер с выражением $(renderedHTML).

Учитывая это ограничение, существует два реалистичных варианта порядка событий:

  • урезать data до <tbody ...>...</tbody> (с регулярное выражение), затем усы рендеринга, затем $tbody = $(renderedHTML).
  • Усы отрисовывают data полностью, затем $tbody = $(renderedHTML).find('tbody')

Насколько я знаю, любой подход будет работать. В обоих случаях вы получите объект jQuery $tbody, содержащий заполненный узел tbody, который затем можно вставить в DOM с помощью $tbody.appendTo($('#myTable')) или аналогичного.

0 голосов
/ 04 марта 2012

Во-первых, ваш шаблон не является хорошей структурой таблицы (конечно, это шаблон), он станет хорошей таблицей после того, как вы выполните $ (data), что-то вроде этого: 

[" {{rows}} {{row}} {{/rows}} ", <table>​…​</table>​]

{{row}} отсутствует в элементе таблицы, поэтому вы не можете получить желаемое за $ ('# this', data) .html ();

Мое решение : 

data.replace(/\n/g, '').match(/<tbody id="#this">(.*)<\/tbody>/g)[0]
...