Механизмы шаблонов JavaScript на основе дерева DOM

Я ищу новый механизм шаблонов Javascript для замены старого шаблона jQuery для моих потребностей в шаблонах клиентской стороны.

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

Какие параметры у меня есть для Javascript-шаблона, которые будут напрямую создавать DOM-деревья вместо текстовых движков? Мне нравится логический подход Mustache.js, но, похоже, он работает только с строками. Интеграция с исходными jQuery также будет приятной особенностью.

Ответы

Ответ 3

soma-template - новый.

Чистая манипуляция DOM, множество функций, естественный синтаксис, полностью расширяемый с другими библиотеками, такими как underscore.string, вызовы функций с параметрами, помощниками, наблюдателями. Возможность обновления только некоторых узлов, если это необходимо, шаблонов внутри самой DOM.

http://soundstep.github.com/soma-template/

Ответ 5

Недавно я создал DOM-шаблон, основанный на PURE и Transparency.

Он поддерживает петли, условия и многое другое.

Взгляните на документ: http://code.meta-platform.com/metajs/components/template/

Не бойтесь, что MetaJS - большая библиотека, templating lib может использоваться автономно.

Краткий пример:

HTML:

<div id="tpl">
    <ul id="tasks">
        <li>
            <span class="task"></span>
            <span class="due-date"></span>
        </li>
    </ul>
</div>

Определить шаблон:

var tpl = Meta.Template(document.getElementById('tpl'), {
    "ul#tasks li": $__repeat("tasks", {
        ".task":        "task",
        ".due-date":    $__date("d. m. Y", "due_date"),
        "@":            $__attrIf("completed", "complete")
    })
});

Шаблон рендеринга:

tpl({
    tasks: [
        {
            task: "Write concept",
            due_date: new Date(2015, 3, 22, 0, 0, 0, 0),
            complete: true
        }, {
            task: "Consult with customer",
            due_date: new Date(2015, 3, 25, 0, 0, 0, 0),
            complete: false
        }
    ]
});

Результат:

<div id="tpl">

    <ul id="tasks">
        <li>
            <span class="task" completed>Write concept</span>
            <span class="due-date">22. 3. 2015</span>
        </li>
        <li>
            <span class="task">Consult with customer</span>
            <span class="due-date">25. 3. 2015</span>
        </li>
    </ul>

</div>

Ответ 6

Посмотрите механизм шаблона Monkberry DOM. Monchberry JavaScript DOM Template Engine

Он очень маленький (всего 1,5 кБ gzipped), библиотека без зависимостей, компиляция сервера, односторонняя привязка данных, и это очень быстро!

Вот пример шаблона и сгенерированного кода:

<div>
  <h1>{{ title }}</h1>
  <p>
    {{ text }}
  </p>
</div>

Будет генерировать:

var div = document.createElement('div');
var h1 = document.createElement('h1');
var p = document.createElement('p');

div.appendChild(h1);
div.appendChild(p);

   ...

view.update = function (data) {
  h1.textContent = data.title;
  p.textContent = data.text;
};

Monkberry поддерживает if, for и настраиваемые теги. И имеет много оптимизаций рендеринга. Шаблоны могут отображаться на сервере с webpack, browserify или cli.

Ответ 7

dna.js - это шаблонизатор, который клонирует элементы DOM (https://dnajs.org).

Пример шаблона для книги:

<h1>Featured Books</h1>
<div id=book class=dna-template>
   <div>Title:  <span>{{title}}</span></div>
   <div>Author: <cite>{{author}}</cite></div>
</div>

Звоните, чтобы вставить копию шаблона в DOM:

dna.clone('book', { title: 'The DOM', author: 'Jan' });

Результирующий HTML:

<h1>Featured Books</h1>
<div class=book>
   <div>Title:  <span>The DOM</span></div>
   <div>Author: <cite>Jan</cite></div>
</div>

Скрипка с образцом "Приложения к делу":
https://jsfiddle.net/uLrc7kmp

todo

dna.js был создан именно для того, чтобы избежать создания и передачи шаблонов строк (я поддерживаю проект).

Ответ 8

Какой сахар вы ищете? Сырой DOM api всегда работал отлично для меня. Если вы действительно принимаете эту идею о том, что механизмы шаблонов не являются хорошими с точки зрения производительности, не используйте innerHTML, если вы хотите эффективно создать дерево DOM. Я стараюсь просто создавать элементы вручную, используя document.createElement. Мои шаблоны создаются путем написания вспомогательных функций, которые создают коллекцию узлов и заполняют их данными, устанавливая свойство .innerText. Затем я могу кэшировать ссылки на узлы, на которые я хочу ссылаться часто, так что мне не нужно проходить дерево DOM, чтобы снова найти эти узлы.

Ответ 9

Бесплатный шаблон jQuery DNA с лицензией MIT и суперспособностями (вы можете повторно применить измененные данные к той же структуре HTML, чтобы обновить пользовательский интерфейс при любом изменении данных...)

https://github.com/webdevelopers-eu/jquery-dna-template/