Хороший шаблонизатор 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.

Он поддерживает множество директив, которые допускают условные выражения, циклы, определяют повторно используемые компоненты шаблона и т. Д.

Стоит посмотреть по следующей ссылке.

http://wiki.github.com/nje/jquery/jquery-templates-proposal

После того, как этот вопрос возник в 2017 году, похоже, что JsRender и JsViews стали текущей официальной реализацией шаблонов в экосистеме jQuery (хотя необязательно требует jQuery):

JsRender - это легкий, но мощный шаблонизатор, обладающий высокой степенью расширения и оптимизированный для высокопроизводительного рендеринга без зависимости от DOM. Он предназначен для использования в браузере или на Node.js, с или без jQuery.

JsRender и JsViews вместе обеспечивают реализацию нового поколения официальных плагинов jQuery JQuery Templates и JQuery Data Link - и заменяют эти библиотеки.

- JsRender GitHub Readme

Официальный сайт: http://www.jsviews.com/

GitHub (JsRender): https://github.com/BorisMoore/jsrender

GitHub (JsViews): https://github.com/BorisMoore/jsviews

Попробуйте async-js-templates. Это быстро, потому что он выполняет параллельные запросы, которые могут быть асинхронными.

Он поставляется с Maven.

Другие вопросы по тегам