Motores de plantilla de JavaScript basados ​​en DOM DOM

Question

Estoy buscando un nuevo motor de plantilla de Javascript para reemplazar la antigua plantilla de jQuery para las necesidades de creación de plantillas de mi cliente.

Prefiero el enfoque donde el motor de plantillas trata con árboles DOM en lugar de cadenas de texto y luego vuelca el contenido de la cadena cocinada en innerHTML. Esto es mejor en cuanto a rendimiento y encuentro que la manipulación DOM es una forma más adecuada de construir más árbol DOM.

¿Qué opciones tengo para el motor de plantillas de Javascript que crearía directamente árboles DOM en lugar de ser motores basados ​​en texto? Me gusta el enfoque sin lógica de Moustache.js, pero parece funcionar solo con cadenas. La integración nativa de jQuery también sería una buena característica.

Answer 1

Transparencia:

https://github.com/leonidas/transparency/

PURO:

http://beebole.com/pure/documentation/

placas

https://github.com/flatiron/plates

¿Por qué todo esto:

http://blog.nodejitsu.com/micro-templates-are-dead

Answer 2

¿Qué tipo de azúcar estás buscando? La API cruda del DOM siempre funcionó bien para mí. Si realmente está adoptando esta idea de que los motores de plantillas no son buenos en términos de rendimiento, no use innerHTML si desea construir eficientemente un árbol DOM. Lo que tiendo a hacer es simplemente crear elementos manualmente usando document.createElement. Mis plantillas se crean escribiendo funciones auxiliares que crean una colección de nodos y los completan con los datos configurando la propiedad .innerText. A continuación, puedo guardar en la memoria caché las referencias a los nodos a los que me refiero frecuentemente para no tener que recorrer el árbol DOM para encontrar estos nodos nuevamente.

Answer 3

distal

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

Answer 4

soma-plantilla es una nueva.

Manipulación DOM puro, muchas características, sintaxis natural, totalmente extensible con otras bibliotecas como underscore.string, llamadas a funciones con parámetros, ayudantes, vigilantes. Capacidad para actualizar solo algunos nodos, si es necesario, plantillas dentro del propio DOM.

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

Answer 5

Esta es una buena comparación de unos 7 famoso motor de plantillas JS: http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

Answer 6

recientemente he creado motor de plantillas DOM inspirado por puro y Transparencia.

Es compatible con bucles, condiciones y mucho más.

Tome un vistazo a doc: http://code.meta-platform.com/metajs/components/template/

No sea que participaban MetaJS es independiente gran biblioteca, lib de plantillas se puede utilizar.

ejemplo corto:

HTML:

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

Definir plantilla:

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") 
    }) 
}); 

Render plantilla:

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 
     } 
    ] 
}); 

Resultado:

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

Answer 7

Eche un vistazo a Monkberry DOM template engine.

Es realmente pequeño (solo 1,5kB gzipped), biblioteca libre de dependencia, compilación de servidores, enlace de datos de una vía, ¡y es dramáticamente rápido!

Aquí ejemplo de plantilla y el código generado:

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

generará:

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 apoya if, for y etiquetas personalizadas. Y tiene muchas optimizaciones de renderizado. Las plantillas se pueden representar en el servidor con webpack, browserify o cli.

• monkberry.js.org

Answer 8

dna.js es un motor de plantillas que los elementos clones DOM (dnajs.org).

plantilla Ejemplo para un libro:

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

Call para insertar una copia de la plantilla en el DOM:

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

resultante HTML:

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

Muestra To- Haga la aplicación con la que puede jugar:
http://jsfiddle.net/wo6og0z8

dna.js fue creado precisamente para evitar construir y pasar plantillas de cadenas (soy el mantenedor project).