Многие слышали про jQuery Templates, некоторые пользовались. Штука крайне удобная, позволяет переложить отрисовку части отображения на сторону клиента, то бишь генерировать html прямиком в браузере, что позволяет во-первых делать крайне быстрые веб-интерфейсы, а во-вторых снижает нагрузку на backend. Но недавно команда jQuery заморозила разработку jQuery Templates на неопределённый срок, чем вызвала немало вопросов в свой адрес.
Слава яйцам, что человек, занимавшийся разработкой jQuery Templates, форкнул проект и назвал его JsRender. И хоть это даже пока и не бета, но работает всё довольно стабильно. Краткий пример как этим пользоваться (у людей, знающих JavaScript проблем с пониманием возникнуть не должно):
<script id="entry" type="text/x-jquery-tmpl">
<div id="entry-{{* result += $view.itemNumber; }}">
{{=author}}
<div class="text">{{=text!}}</div>
{{#each comments}}
<div class="comment">
{{=author}} написал:
<br>
{{=comment!}}
</div>
{{/each}}
</div>
</script>
<div id="wrap"></div>
<script>
var entries = [
{ author: "user11", text: "Привет 1", comments: [
{ author: "user1", comment: "Привет 2" },
{ author: "user2", comment: "Привет 3" },
{ author: "user3", comment: "Привет 4" }
] },
{ author: "user22", text: "Пока 1", comments: [
{ author: "user4", comment: "Пока 2" },
{ author: "user5", comment: "Пока 3" },
{ author: "user6", comment: "Пока 4" }
] },
{ author: "user33", text: "Проверка", comments: [] }
];
$("#wrap").html( $("#entry").render(entries) );
</script>
<div id="entry-{{* result += $view.itemNumber; }}">
{{=author}}
<div class="text">{{=text!}}</div>
{{#each comments}}
<div class="comment">
{{=author}} написал:
<br>
{{=comment!}}
</div>
{{/each}}
</div>
</script>
<div id="wrap"></div>
<script>
var entries = [
{ author: "user11", text: "Привет 1", comments: [
{ author: "user1", comment: "Привет 2" },
{ author: "user2", comment: "Привет 3" },
{ author: "user3", comment: "Привет 4" }
] },
{ author: "user22", text: "Пока 1", comments: [
{ author: "user4", comment: "Пока 2" },
{ author: "user5", comment: "Пока 3" },
{ author: "user6", comment: "Пока 4" }
] },
{ author: "user33", text: "Проверка", comments: [] }
];
$("#wrap").html( $("#entry").render(entries) );
</script>
Теперь по пунктам о том, что это было:
Всё, что находится в теге <script id="entry" type="text/x-jquery-tmpl"> — это шаблон. Синтаксис довольно прост для понимания: {{=author}} выводит поле author из вводных данных, {{=text!}} — поле text. Но обратите внимание на восклицательный знак после имени поля — он означает, что спецсимволы в данных не будут эскейпится, а выведутся «как есть». Полезно, если хотите вставлять куски html в шаблон. Далее код между {{#each comments}} и {{/each}} выполняется для каждого объекта, внутри множества comments, все названия полей ссылаются на эти поля. {{* result += $view.itemNumber; }} — этот тег выполняет javascript код напрямую, конкретно в этом случае к выводимому результату (result) добавляется текущий номер итерации ($view.itemNumber). Переменная entries содержит данные, которые парсятся в шаблон. Переменная задана локально, но никто не мешает её, например стянуть AJAX запросом с backend-a. И самая главная строчка: $("#wrap").html( $("#entry").render(entries) );,$("#entry").render(entries) — парсит шаблон, находящийся в $("#entry"), с данными, находящимися в переменной entries. Возвращается готовый html.
Вот такая вот библиотека. Категорически рекомендую всем её пощупать. Через некоторое время, если это кого-то заинтересует, я продолжу знакомить вас с JsRender.
0 коммент.