Хороший шаблонизатор Javascript для работы с JSON
Я посмотрел на jTemplates, и это стоит попробовать. Существуют ли другие движки шаблонов, кроме jTemplates?
8 ответов
Мне понравился подход JavaScriptMVC Frameworks Views, особенно потому, что он использует сам JavaScript в качестве языка шаблонов. Каркас теперь основан на jQuery, и вы можете визуализировать вашу модель прямо в представлениях (модель поддерживает JSON, JSONP, XML и т. Д.).
Вы пробовали pure.js?
Основное отличие от десятков доступных шаблонизаторов JS состоит в том, что PURE оставляет HTML полностью отделенным от логики JS. И это тоже довольно быстро.
Однако это не обычный <%...%> вид шаблонного программирования, который вам может понравиться.
У него есть шаблонный / декларативный подход, который имеет некоторое сходство с XSLT (но без боли...)
Вы можете использовать это: https://jocapc.github.io/jquery-view-engine/
Он связывает свойства объекта JSON в пустой шаблон HTML и сопоставляет свойства с элементами по имени, идентификатору или классу.
Во-первых, вам нужно иметь простой HTML-шаблон на своей странице:
<div id="template">
<h1 id="Name"></h1>
<label>Description:</label>
<textarea name="Desc"></textarea>
<ul>
<li class="bind-Tags"></li>
</ul>
</div>
Тогда вам нужен объект JS, который будет помещен в шаблон:
var data = { Name: "JOVN",
Desc: "The simplest view engine",
Tags: ["View engine", "JavaScript", "SPA"]
}
Наконец, просто заполните представление объектом данных:
$("div#template").view(data);
Результат:
<div id="template">
<h1 id="Name">JOVN</h1>
<label>Description:</label>
<textarea name="Desc">The simplest view engine</textarea>
<ul>
<li class="bind-Tags">View engine</li>
<li class="bind-Tags">JavaScript</li>
<li class="bind-Tags">SPA</li>
</ul>
</div>
Движок представления будет заполнять отдельные поля или дублировать элементы массива в шаблоне.
Вот один из примеров, реализованный в jQuery для языка шаблонов Smarty. http://www.balupton.com/sandbox/jquery-smarty/demo/
Одной из впечатляющих функций является поддержка динамических обновлений. Поэтому, если вы обновите переменную шаблона, она будет обновлена в любом месте шаблона, где используется эта переменная. Довольно изящно.
Вы также можете подключиться к изменениям переменных, используя событие onchange. Так что это полезно, скажем, для выполнения эффектов или AJAX, когда переменная "страница" меняется;-)
Yajet - новый, определяющий синтаксис, отличный от всего, что мы видели раньше.:-) Он компилирует шаблоны и работает быстро. Это не зависит от браузера и библиотеки; Существует небольшая оболочка jQuery для людей, которые не могут жить без jQuery, но сам движок независим и может работать в Rhino или V8.
Он поддерживает множество директив, которые допускают условные выражения, циклы, определяют повторно используемые компоненты шаблона и т. Д.
Стоит посмотреть по следующей ссылке.
После того, как этот вопрос возник в 2017 году, похоже, что JsRender и JsViews стали текущей официальной реализацией шаблонов в экосистеме jQuery (хотя необязательно требует jQuery):
JsRender - это легкий, но мощный шаблонизатор, обладающий высокой степенью расширения и оптимизированный для высокопроизводительного рендеринга без зависимости от DOM. Он предназначен для использования в браузере или на Node.js, с или без jQuery.
JsRender и JsViews вместе обеспечивают реализацию нового поколения официальных плагинов jQuery JQuery Templates и JQuery Data Link - и заменяют эти библиотеки.
Официальный сайт: http://www.jsviews.com/
GitHub (JsRender): https://github.com/BorisMoore/jsrender
GitHub (JsViews): https://github.com/BorisMoore/jsviews
Попробуйте async-js-templates. Это быстро, потому что он выполняет параллельные запросы, которые могут быть асинхронными.
Он поставляется с Maven.