Javascript Girl
  1. Javascript Girl
  3. Modèles de modèles JavaScript basés sur arborescence DOM
Intereting Posts
Afficher le spinner sur plusieurs appels $ http angularJs Pourquoi window.open (…) .onunload = function () {…} ne fonctionne pas comme je m'attends? Backbone.js: écraser toJSON Comment utiliser le type d'entrée = 'date' pour la colonne de la date dans jqGrid Code de javascript conditionnel n'effectuant pas Quelle est la différence entre un objet jQuery et un élément DOM? Différence entre .get () et .index ()? 'Media-queries' pour javascript – code différent pour différentes hauteurs / largeurs de la fenêtre Javascript __proto__ – clarification? Comment envoyer un courrier électronique en utilisant javascript ou jquery Facebook Graph API ne renverra pas l'adresse électronique Test d'une fonction d'arrêt dans Angular avec Jasmine n'appelle jamais la fonction Utiliser le contenu de deux variables et l'utiliser comme un seul Taille de json maximale pour la réponse au navigateur Dumping Source Code dans un fichier local utilisant CasperJS Javascript clientide routage / pathing library

Modèles de modèles JavaScript basés sur arborescence DOM

Je suis à la recherche d'un nouveau moteur de modèle Javascript pour remplacer l'ancien modèle jQuery pour mes besoins de modèles de client.

Je préfère approcher où le moteur de modèle traite des arbres DOM au lieu de chaînes de texte et plus tard détruit le contenu de la chaîne cuit dans innerHTML . Ceci est meilleur pour les performances et je trouve la manipulation DOM plus appropriée pour construire plus d'arborescence DOM.

Quelles sont les options que j'ai pour le moteur de modèle Javascript qui créerait directement des arbres DOM au lieu d'être des moteurs basés sur le texte? J'aime l'approche sans logique de Moustache.js, mais il semble fonctionner uniquement sur des chaînes. L'intégration jQuery native serait également une fonctionnalité intéressante.

Transparence:

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

PUR:

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

Assiettes

https://github.com/flatiron/plates

Pourquoi tout ça:

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

Distal

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

Soma-template est un nouveau.

Manipulation DOM pure, beaucoup de fonctionnalités, syntaxe naturelle, entièrement extensible avec d'autres bibliothèques telles que underscore.string, appels de fonction avec paramètres, assistants, observateurs. Possibilité de mettre à jour seulement certains noeuds si nécessaire, des modèles à l'intérieur du DOM lui-même.

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

Ceci est une bonne comparaison à propos du 7 moteur de la célèbre JS: http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

J'ai créé récemment un moteur de modélisation DOM inspiré par PURE et Transparency.

Il prend en charge les boucles, les conditions et bien plus encore.

Consultez le document: http://code.meta-platform.com/metajs/components/template/

Ne craignez pas que MetaJS soit une grande bibliothèque, la libération de modèles peut être utilisée de façon autonome.

Exemple court:

HTML: 

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

Définir le modèle: 

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

Modèle de rendu: 

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

Résultat: 

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

Jetez un oeil au moteur de modèle Monkberry DOM . Monkberry JavaScript Template DOM Engine

Il est vraiment petit (seulement 1,5 Ko), une bibliothèque sans dépendance, une compilation de serveur, une liaison de données unidirectionnelle, et c'est dramatiquement rapide!

Voici l'exemple du modèle et du code généré: 

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

Générera: 

 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 supporte if , for et des balises personnalisées. Et a beaucoup d'optimisations de rendu. Les modèles peuvent être rendus sur le serveur avec le webpack , browserify ou cli .

  • Monkberry.js.org

Dna.js est un moteur de modélisation qui clone les éléments DOM ( dnajs.org ).

Exemple de modèle pour un livre: 

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

Appelez pour insérer une copie du modèle dans DOM: 

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

HTML résultant: 

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

Exemple d' application à laquelle vous pouvez utiliser:
http://jsfiddle.net/wo6og0z8

Dna.js a été créé précisément pour éviter de construire et de passer autour des modèles de chaînes (je suis le responsable du projet ).

Quel type de sucre recherchez-vous? L'api brut de DOM m'a toujours bien fonctionné. Si vous adoptez réellement cette idée que les moteurs de modèles ne sont pas bons en termes de performances, n'utilisez pas innerHTML si vous souhaitez créer efficacement un arbre DOM. Ce que j'ai tendance à faire, c'est simplement créer des éléments manuellement à l'aide de document.createElement. Mes modèles sont créés en écrivant des fonctions d'aide qui créent une collection de nœuds et les remplissent avec les données en définissant la propriété .innerText. Je peux ensuite cacher les références aux noeuds auxquels je souhaite me référer fréquemment afin de ne pas avoir à traverser l'arborescence des DOM pour retrouver ces nœuds.