Шаблоны Jquery: один родительский контейнер, много детей?

Question

Используя шаблоны jquery, я хочу создать список.Мне нужен один родительский элемент <ul /> со многими <li /> элементами, в результате чего:

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Мои данные похожи на это:

var data =
[
  { val: 'One' },
  { val: 'Two' }
]

В настоящее время дочерний элемент <li />шаблон выглядит так:

<script id="child-tmpl" type="text/x-jquery-tmpl">
    <li>
      ${val}
    </li>
</script>

Чтобы получить желаемый результат, я сейчас занимаюсь этим:

$('<ul></ul>').append($("#answer-tmpl").tmpl(data));

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

Скорее, у кого-нибудь есть представление о том, как может выглядеть родительский <ul /> шаблон Jquery?

Answer 1

Вместо того, чтобы давать tmpl массив, присвойте ему объект, который имеет массив как поле:

$("#answer-tmpl").tmpl({ data: data });

Затем вы можете изменить свой шаблон следующим образом:

<script id="answer-tmpl" type="text/x-jquery-tmpl">
  <ul>
    {{each data}}
    <li>
      ${val}
    </li>
    {{/each}}
  </ul>
</script>

Рабочий пример можно посмотреть на http://jsfiddle.net/YNm3n/

Answer 2

jt - есть фантастический пример этого в dave wards encosia, который позволит вам использовать красивую компактную композицию в шаблонах jquery возьмите mosey для:

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

Я думаю, что это приведет вас к соглашению по конфигурации для такого типа вещей, это сделал я.

Answer 3

var data = ['a', 'b', 'c'];

var list = $('<ul/>');
$.each(data, function(idx, val) {
    $('<li/>').html(val).appendTo(list);
});
$('body').append(list);

Это делает работу без каких-либо строковых представлений.Однако код в вашем вопросе гораздо более эффективен , поскольку нет необходимости в манипуляциях с DOM для каждого элемента.хорошая идея.

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