web-dev-qa-db-fra.com

Quelles sont les différences entre Moustache.js et Handlebars.js?

Les principales différences que j'ai vues sont les suivantes:

  • Le guidon ajoute #if, #unless, #with et #each
  • Le guidon ajoute des aides
  • Les modèles de guidons sont compilés (Moustache peut être aussi)
  • Guidons supports chemins
  • Autorise l'utilisation de {{this}} dans des blocs (qui fournissent la valeur de chaîne de l'élément en cours)
  • Handlebars.SafeString() (et peut-être d'autres méthodes)
  • Le guidon est 2 à 7 fois plus rapide
  • Moustache prend en charge sections inversées (c'est-à-dire if !x ...)

(S'il vous plaît corrigez-moi si je me trompe avec ce qui précède.)

Y a-t-il d'autres différences majeures qui me manquent?

handlebars.jsmustacheclient-side-templatingtemplating-engine
316
Chad Johnson

Vous l'avez à peu près cloué, mais des modèles de moustache peuvent également être compilés.

Moustache manque des aides et des blocs plus avancés car il s’efforce d’être dépourvu de logique. Les aides personnalisées du guidon peuvent être très utiles, mais finissent souvent par introduire une logique dans vos modèles.

Moustache a beaucoup de compilateurs différents (JavaScript, Ruby, Python, C, etc.). Le guidon a commencé en JavaScript. Il existe maintenant des projets tels que Django-handlebars , handlebars.Java , guidon-Ruby , lightncandy (PHP ) , et handlebars-objc .

120
frontendbeauty

Moustache pros:

  • Choix très populaire auprès d'une grande communauté active.
  • Prise en charge côté serveur dans de nombreuses langues, y compris Java.
  • Les modèles sans logique font un excellent travail en vous obligeant à séparer la présentation de la logique.
  • Une syntaxe épurée conduit à des modèles faciles à créer, à lire et à gérer.

Moustache contre:

  • Un peu trop sans logique: les tâches de base (par exemple, étiqueter des lignes alternées avec différentes classes CSS) sont difficiles.
  • La logique d'affichage est souvent repoussée sur le serveur ou implémentée en tant que "lambda" (fonction appelable).
  • Pour que les lambdas fonctionnent sur le client et le serveur, vous devez les écrire en JavaScript.

Guidons professionnels:

  • Les modèles sans logique font un excellent travail en vous obligeant à séparer la présentation de la logique.
  • Une syntaxe épurée conduit à des modèles faciles à créer, à lire et à gérer.
  • Modèles compilés plutôt qu'interprétés.
  • Meilleure prise en charge des chemins que la moustache (c’est-à-dire atteindre le fond d’un objet du contexte).
  • Meilleur support pour les assistants mondiaux que la moustache.

Guidons contre:

  • Nécessite un JavaScript côté serveur pour le rendu sur le serveur.

Source: Le jeu de modèles côté client: moustache, guidon, dust.js, etc.

68
Faraz Kelhini

Une différence subtile mais significative réside dans la manière dont les deux bibliothèques abordent la portée. Moustache retombera sur la portée parent si elle ne peut pas trouver une variable dans le contexte actuel. Le guidon renverra une chaîne vide.

C’est à peine mentionné dans le fichier README de GitHub, où il n’ya qu’une ligne:

Le guidon s'écarte légèrement de Moustache en ce sens qu'il n'effectue pas de recherche récursive par défaut.

Cependant, comme indiqué ici, il existe un indicateur permettant aux guidons de se comporter de la même manière que Moustache, mais cela affecte les performances.

Cela a un effet sur la manière dont vous pouvez utiliser les variables # comme conditionnelles.

Par exemple dans Moustache, vous pouvez faire ceci:

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

Cela signifie fondamentalement "si la variable existe et est la vérité, affiche une étendue contenant la variable". Mais dans le guidon, vous devez soit:

  • utilisez {{this}} à la place
  • utilisez un chemin parent, c'est-à-dire {{../variable}} pour revenir à la portée correspondante
  • définir une enfant variable valeur dans l'objet parent variable

Plus de détails à ce sujet, si vous les voulez, ici .

24
guypursey

NOTE: Cette réponse est obsolète. C'était vrai au moment où il a été posté, mais ce n'est plus le cas.

Moustache a des interprètes dans de nombreuses langues, tandis que Handlebars est en Javascript.

20
KevBurnsJr

Une autre différence entre eux est la taille du fichier:

Pour voir les avantages de Handlebars.js en termes de performances, nous devons utiliser des modèles précompilés.

Source: Présentation des moteurs de modélisation JavaScript

10
simhumileco

Une autre différence subtile est le traitement des valeurs de fausseté dans les blocs {{#property}}...{{/property}}. La plupart des implémentations de moustache obéiront simplement à la fausseté de JS, sans restituer le bloc si property est '' ou '0'.

Handlebars will rend le bloc pour '' et 0, mais pas pour les autres valeurs fausses. Cela peut causer des problèmes lors de la migration des modèles.

8
Jakub Wasilewski

Je pense que l’un des inconvénients mentionnés pour "Guidon" n’est plus vraiment valable.

Handlebars.Java nous permet maintenant de partager les mêmes langages de gabarit pour le client et le serveur, ce qui représente une grande victoire pour les grands projets comportant plus de 1 000 composants nécessitant un rendu sur le serveur pour le référencement.

Jetez un oeil à https://github.com/jknack/handlebars.Java

5
midart

—En plus d'utiliser "this" pour le guidon et la variable imbriquée dans le bloc variable pour moustache, vous pouvez également utiliser le point imbriqué dans un bloc pour moustache:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}
3
Regina Serrambana