tablas - Los motores de plantillas JavaScript basados en el árbol DOM

obtener datos de una tabla html javascript

Question

Estoy buscando un nuevo motor de plantillas de Javascript para reemplazar las antiguas plantillas jQuery para las necesidades de mis clientes.

Preferiría un enfoque donde el motor de plantillas trate con árboles DOM en lugar de cadenas de texto y luego descargue el contenido de la cadena cocida en innerHTML . Este es un mejor rendimiento y me parece que la manipulación de DOM es una forma más adecuada de construir más del á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 Mustache.js, pero parece funcionar solo en cadenas. La integración nativa de jQuery también sería una buena característica.

Answer 1

¿Qué tipo de azúcar estás buscando? La api de DOM en bruto 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 un árbol DOM de manera eficiente. Lo que tiendo a hacer es crear elementos manualmente utilizando document.createElement. Mis plantillas se crean escribiendo funciones de ayuda que crean una colección de nodos y los rellenan con los datos al establecer la propiedad .innerText. Luego puedo almacenar en caché las referencias a los nodos a los que deseo referirme con frecuencia para no tener que atravesar el árbol DOM para encontrar estos nodos nuevamente.

Answer 2

Distal

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

Answer 3

Eche un vistazo al motor de plantillas DOM de Monkberry .

Es realmente pequeño (solo 1.5kB gzipped), biblioteca libre de dependencias, compilación del servidor, enlace de datos unidireccional, ¡y es dramáticamente rápido!

Aquí ejemplo de plantilla y 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 soporta las etiquetas if , for y custom. Y tiene muchas optimizaciones de renderizado. Las plantillas se pueden representar en el servidor con webpack , browserify o cli .

• monkberry.js.org

Answer 4

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

Answer 5

Recientemente he creado un motor de plantillas DOM inspirado en PURE y Transparencia.

Soporta bucles, condiciones y mucho más.

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

No tenga miedo de que MetaJS sea una gran biblioteca, las plantillas de plantillas se pueden usar de forma independiente.

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

Plantilla de render:

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 6

Transparencia:

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

PURO:

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

Platos

https://github.com/flatiron/plates

Por qué todo esto:

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

Answer 7

soma-template es una nueva.

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

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

Answer 8

dna.js es un motor de plantillas que clona elementos DOM ( https://dnajs.org ).

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

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

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

HTML resultante:

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

Fiddle con una muestra de "Aplicación de tareas" :
https://jsfiddle.net/qs61mbp9

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