jQuery: добавление нового сложного элемента списка HTML в цикле

Question

jQuery: добавление нового сложного элемента списка HTML в цикле

0

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

Например, один из способов, о котором я только могу думать, это:

$.each(json.data, function(key, value) {
   $('ul').prepend("<li><div class='name'>" + value.name + "</div>...<li>");
});

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

Как мне обойти это и сделать/представить его правильно?

Предпочитаете шаблон в другом файле, который я загружаю, а затем присваиваем HTML/текст определенным элементам?

Alias 13 нояб. 2013, в 17:50

Источник

Теги:

jquery

html

2 ответа

1

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

<!-- Because of the 'type' attribute, the browser won't try to execute
     this as it were javascript -->
<script type="text/x-handlebars-template" id="result-template">
   <ul>
    {{#each results}}
      <li>
        <div class='name'>{{name}}</div>
        <div class='age'>{{age}}</div>
      </li>
    {{/each}}
  </ul>
</script>

Для рендеринга:

var source = $("#result-template").html();
var template = Handlebars.compile(source);

// The 'template' function returns the rendered HTML
var ul = $(template({results: jsonData}));

ul.appendTo("body");

Рабочий пример: http://jsbin.com/ESIKiDoK/1/edit

Renato Zannon 13 нояб. 2013, в 14:21

0

Ах, это хороший способ, но в настоящее время я использую Laravel 4 (с Blade Templating). Я предполагаю, что будет некоторый конфликт с {{}}, так как они оба используют это. Хм .. Нужно разобраться в этом.
Alias 13 нояб. 2013, в 16:37
0

@ Алиас Возможно, вы захотите взглянуть на этот вопрос: stackoverflow.com/questions/14324850/… Кажется, есть решение для используемой вами платформы
Renato Zannon 13 нояб. 2013, в 16:49

Ещё вопросы

Ах, это хороший способ, но в настоящее время я использую Laravel 4 (с Blade Templating). Я предполагаю, что будет некоторый конфликт с {{}}, так как они оба используют это. Хм .. Нужно разобраться в этом.
@ Алиас Возможно, вы захотите взглянуть на этот вопрос: stackoverflow.com/questions/14324850/… Кажется, есть решение для используемой вами платформы

megawac · Accepted Answer · 2013-11-13T14-51-00.000Z

В основном создайте шаблон, чтобы уменьшить, как часто вы фактически добавляете в dom. Вы можете написать тот же самый шутник кода, как это, и вы можете ожидать, что он будет преформировать лучше. Просто присоедините строку локально и сразу вставьте ее.

var html = "", value;
for(var i = json.data.length - 1; i >=0; i--) {//same as prepending (or reverse the list)
    value = json.data[i];
    html += "<li><div class='name'>" + value.name + "</div>...<li>";
}
$('ul').prepend(html);

Перечитывая ваш фрагмент, я не могу определить, является ли json.data объектом или массивом. Для объекта ваш оригинальный метод был в порядке:

$.each(json.data, function(key, value) {
   html += "<li><div class='name'>" + value.name + "</div>...<li>";
});

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

Да, это объект. Думаю, так будет работать ... есть ли какие-то недостатки?
Не совсем, просто предположил, что это массив, потому что вы использовали prepend