Механизмы шаблонов JavaScript на основе дерева DOM - PullRequest
Новая
       23

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

20 голосов
/ 14 февраля 2012

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

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

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

Ответы [ 9 ]

11 голосов
/ 15 февраля 2012
4 голосов
/ 23 февраля 2012

Дистальный

http://code.google.com/p/distal

2 голосов
/ 23 ноября 2012

шаблон soma - новый.

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

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

1 голос
/ 03 сентября 2015

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 был создан именно для того, чтобы избежать создания и передачи шаблонов строк (я проект сопровождающий).

1 голос
/ 30 июня 2015

Взгляните на Шаблонный движок Monkberry DOM . Monkberry JavaScript DOM Template Engine

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

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

<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.

1 голос
/ 29 марта 2015

Я недавно создал шаблонизатор DOM, вдохновленный PURE и Transparency.

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

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

Не бойтесь, что MetaJS - большая библиотека, шаблонизатор 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>
1 голос
/ 13 сентября 2013

Это хорошее сравнение с 7 знаменитыми шаблонизаторами JS: http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

0 голосов
/ 03 мая 2019

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

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

0 голосов
/ 14 февраля 2012

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

...