Meilleure stratégie à utiliser HAML modèle avec Backbone.js

Question

Im obtenir dans Backbone.js de la structure du code javascript pour mon projet et j'aime HAML pour gabarits sur le backend(rails), de sorte que Id aiment à l'utiliser pour la colonne vertébrale des Vues sur la création de modèles. Je sais qu'il existe plusieurs HAML ports de Javascript, comme https://github.com/creationix/haml-js et de la colonne vertébrale supporte JST et moustache avec facilité.

Quel est le meilleur moyen d'utiliser haml de template à la place.

Existe-il des inconvénients à l'utilisation de HAML sur le côté client? Performance, extra script de temps de charge(prise en charge par actif de l'emballage des outils comme jammit)

Answer 1

Je sais que vous avez déjà mentionné, mais je voudrais suggérer à l'aide de haml-js avec Jammit. Il suffit d'inclure haml.js dans votre javascripts et de vos biens.yml ajouter template_function: Haml ainsi que vos fichiers de modèle à un package. par exemple

  javascript_templates:
    - app/views/**/*.jst.haml

Alors dans vos vues, vous pouvez inclure ce package (= include_javascripts :javascript_templates) et Jammit sera forfait tout .jst.haml fichiers dans window.JST['file/path']. (Si vous regardez la source de la page, vous devriez voir un fichier javascript comme <script src="/assets/javascript_templates.jst" type="text/javascript"></script>)

L'utilisation de ces modèles de simplement appeler l'un de ces JSTs Jammit créé. c'est à dire

$('div').html(JST['file/path']({ foo: 'Hello', bar: 'World' }));

Et Jammit utilisera le Haml-js modèle de fonction pour rendre le modèle.

Remarque: veillez à point pour le dépôt github de Jammit dans votre Gemfile pour obtenir la dernière version qui supporte les caractères de saut de ligne nécessaire pour haml-js de travail.

Answer 2

Je suis sur le point de donner haml-café d'un coup. (aucun calembour prévu) je ne peux pas chanter les louanges de coffeescript assez; en plus, c'est un défaut maintenant dans les Rails 3.1. Maintenant que je peux intégrer coffeescript à l'intérieur de mon préféré de templating de la langue, et des pré-compiler le lot.

Oh, la joie.. maintenant pour le faire fonctionner.

Answer 3

Je sais que ce serait un peu aller autour de la question, mais nous y voilà :)

J'ai mon application rails, j'utilise haml pour tous les points de vue sur le backend. C'est génial. Pour certaines raisons (principalement i18n), je n'aime pas utiliser des modèles sur le côté client. C'est comment je le fais:

• créer l'ensemble de votre modèle en ruby haml et de les stocker dans la balise script avec un funky type (j'ai utiliser du texte/js-modèle). Cela va créer prerendered html que vous pouvez jouer avec jquery et de la colonne vertébrale.
• lorsque vous créez votre épine dorsale de vues, la charge de la stockées modèle et l'ajouter à votre document
• Rendre votre point de vue en modifiant le modèle préexistant

Vous traitez uniquement avec du html et jQuery est génial pour ça. Pour certains points de vue qui ne nécessite pas l'i18n, j'utilise le trait de soulignement de template car il est déjà là.

Comme pour haml de template de la performance, il semble moustache et le guidon sont plus rapides.

Answer 4

J'ai travaillé sur des Rails 3/Backbone application et ont pris une approche différente après l'évaluation de hamlbars, haml_assets, et de jouer avec haml-js.

Ce sont tous des solides de gemmes qui offrent des solutions à ce problème, chacun ayant une certaine série de compromis. Haml-js exige, par exemple, les modèles de rendu côté client (il n'y a rien de mal à cela, c'est tout simplement un compromis). Hamlbars et haml_assets à la fois prise dans l'asset pipeline, mais parce qu'ils existent en dehors de l'objet de requête certaines aides ne fonctionnera pas. À la fois faire des ajustements et d'inclure l'url d'aides et de ActionView aides, mais ne vous attendez pas à avoir les mêmes fonctionnalités que l'écriture de haml dans une vue.

Mon approche est un peu encombrant (je prévois de mettre cela dans un moteur), mais il fonctionne bien et facilement reproductibles. Il utilise haml_assets lorsque c'est possible, mais retombe sur la signification d'un modèle à partir d'un "modèles" contrôleur avec un "show" de l'action

• Mettre votre point de vue dans le répertoire templates/
• Vous pouvez ajouter une mise en page qui rend ce point de vue dans un JST fonction
• Vous pouvez spécifier l'action show pour revenir "application/javascript" comme type de contenu
• Vous avez accès à tous les assistants lors de l'écriture de modèles
• Vous pouvez ajouter des balises de script pour "/template/whatever", qui rendra quel que soit le modèle, ou de l'utilisation de l'itinéraire d'expansion pour mieux organisé points de vue.

L'avantage de cette approche est que parce que vos points de vue sont accessibles à partir de contrôleurs, vous avez la possibilité de les rendre aussi jst modèles (via les modèles de contrôleur) ou via d'autres contrôleurs partiels. Cela vous permettra de servir seo-friendly pages directement à partir de l'url (comme /produits/widgets/super-cool-widget) ont été les utilisateurs peuvent obtenir la mise en cache basée sur des modèles /templates/widgets/super-cool-widget.

Answer 5

Je ne peux pas répondre de manière intégrée sur Craig's thread (je suppose que j'ai besoin d'une sorte de réputation de post sur les réponses existantes), mais vous n'avez plus besoin de saisir une fourchette de jammit à utiliser haml-js -- la validation dans la branche principale de jammit. Voir ici pour les détails: https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

EDIT: le dernier bijou de presse a été en janvier, et les commits ont été ajoutés en Mars, de sorte que vous aurez besoin de mettre en place bundler pour exécuter sur le dépôt github ou de le construire localement. Si vous n'utilisez pas la TÊTE de jammit vous aurez de la difficulté à obtenir les modèles analysée correctement depuis les retours à la ligne sont supprimés.

Tout ce que je devais faire de cette série est:

1) Ajouter ce qui suit à mon "actifs.yml" fichier:

template_function: "Haml"

2) Ajouter le haml-js source et les modèles que je voulais charger mon fichier d'actifs: javascript: core: - public/javascripts/vendor/haml.js modèles: - app/views/événements/_form.haml.jst

3) assurez-vous que j'était en train de charger à la fois de base et des modèles dans mon application.html.erb

<%= include_javascripts :core :modèles d' %>

4) les modèles d'Accès à mes fichiers sources via JST[nom de fichier] (c'est à dire, dans ce cas JST['_form']). Un gotcha vaut la peine de mentionner -- jammit examinera tous les modèles et l'espace de noms vers le bas sur le chemin commun, donc si vous avez app/views/foo/fichier.jst et app/views/bar/fichier.jst, vous devez accéder avec JST['foo/fichier.jst'] et JST['bar/fichier.jst']. Si vous aviez app/views/foo/fichier1.jst et app/views/foo/fichier2.jst, ils seraient directement au JST['fichier1.jst'] et JST['file2.jst'] -- qui est facile d'oublier quand vous êtes débutant avec votre première quelques modèles.

Tout a fonctionné assez bien. Je ne sais pas pourquoi Craig nécessaire de définir une fonction -- je viens d'utiliser la valeur par défaut Haml fonction fournie par l'haml.js mais peut-être que je suis absent quelque chose.