webentwicklung-frage-antwort-db.com.de

Die beste Strategie zur Verwendung der HAML-Vorlage mit Backbone.js

Ich komme in Backbone.js, um den Javascript-Code für mein Projekt zu strukturieren, und ich liebe HAML für das Templating auf dem Backend (Rails). Ich möchte es daher gerne für Backbone Views verwenden. Ich weiß, dass es mehrere HAML-Ports für Javascript gibt, wie https://github.com/creationix/haml-js und Backbone unterstützt JST und Schnurrbart mit Leichtigkeit. 

Was ist der beste Weg, um Haml-Templating stattdessen zu verwenden.

Gibt es irgendwelche Nachteile bei der Verwendung von HAML auf der Clientseite? Leistung, zusätzliche Skriptladezeit (wird von Asset-Packaging-Tools wie Jammit beachtet)

38

Ich weiß, dass Sie es bereits erwähnt haben, aber ich würde vorschlagen, haml-js mit Jammit zu verwenden. Fügen Sie einfach haml.js in Ihre Javascripts ein und fügen Sie template_function: Haml in Ihre assets.yml ein. Außerdem fügen Sie Ihre Vorlagendateien in ein Paket ein. z.B.

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

Dann können Sie dieses Paket in Ihre Ansichten aufnehmen (= include_javascripts :javascript_templates) und Jammit packt alle .jst.haml-Dateien in window.JST['file/path']. (Wenn Sie die Seitenquelle anzeigen, sollte eine Javascript-Datei wie <script src="/assets/javascript_templates.jst" type="text/javascript"></script> angezeigt werden.)

Um diese Vorlagen zu verwenden, rufen Sie einfach eine der erstellten JSTs Jammit auf. d.h.

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

Und Jammit verwendet die Haml-js-Vorlagenfunktion, um die Vorlage zu rendern.

Hinweis: Stellen Sie sicher, dass Sie in Ihrem Gemfile auf das github-Repo von Jammit verweisen, um die neueste Version zu erhalten, die Zeilenumbrüche unterstützt, die für das Funktionieren von haml-js erforderlich sind.

26
Craig

Ich bin dabei, haml-coffee einen Schuss zu geben. (kein Wortspiel beabsichtigt) Ich kann das Lob des Kaffeeskripts nicht genug singen; Außerdem ist es jetzt ein Standard in Rails 3.1. Jetzt kann ich Coffeescript in meine bevorzugte Templatiersprache einbetten und das Los vorkompilieren. 

Oh, die Freude ... jetzt, damit es funktioniert.

14
Duke

Ich weiß, dass sich die Frage etwas ändern würde, aber hier gehen wir hin :)

Ich meine Rails-App verwende haml für alle Ansichten im Backend. Es ist toll. Aus bestimmten Gründen (hauptsächlich i18n) verwende ich keine Vorlagen auf der Clientseite. So mache ich es:

  • erstellen Sie alle Ihre Vorlagen in Ruby Haml und speichern Sie sie mit einem funky-Typ im Skript-Tag (ich verwende Text/Js-Vorlage). Dadurch wird vorgerenderte HTML-Dateien erstellt, mit denen Sie mit Jquery und Backbone spielen können.
  • laden Sie beim Erstellen Ihrer Backbone-Ansichten die gespeicherte Vorlage und hängen Sie sie an Ihr Dokument an
  • Rendern Sie Ihre Ansicht, indem Sie die bereits vorhandene Vorlage ändern

Sie beschäftigen sich nur mit HTML und jQuery ist dafür super. Für einige Ansichten, für die i18n nicht erforderlich ist, verwende ich Unterstreichungsvorlagen, da diese bereits vorhanden sind.

Was die Performance von Haml-Templaten angeht, so scheint es, als wären Schnurrbart und Lenker schneller. 

6
Julien

Ich habe an der Rails 3/Backbone-App gearbeitet und habe einen anderen Ansatz gewählt, nachdem ich hamlbars , haml_assets ausgewertet und mit haml-js herumgespielt habe. 

Dies sind alles solide Edelsteine, die Lösungen für das Problem bieten, von denen jeder bestimmte Kompromisse eingeht. Haml-js beispielsweise erfordert das Rendern von Templates auf der Client-Seite (daran ist nichts auszusetzen, es handelt sich lediglich um einen Kompromiss). Hamlbars und haml_assets fügen beide in die Asset-Pipeline ein. Da sie jedoch außerhalb des Anforderungsobjekts vorhanden sind, funktionieren einige Helfer nicht. Beide nehmen einige Anpassungen vor und enthalten URL-Helfer und ActionView-Helfer. Erwarten Sie jedoch nicht die gleichen Funktionen wie das Schreiben von haml in eine Ansicht.

Mein Ansatz ist etwas sperrig (ich habe vor, dies in einen Motor einzubauen), funktioniert aber gut und lässt sich leicht replizieren. Es verwendet, wenn möglich, haml_assets, greift jedoch auf die Bereitstellung einer Vorlage von einem "template" -Controller mit einer "show" -Aktion zurück 

  • Legen Sie Ihre Ansichten im Verzeichnis view/templates/ab
  • Sie können ein Layout hinzufügen, das diese Ansicht in einer JST-Funktion darstellt
  • Sie können die Show-Aktion angeben, um "application/javascript" als Inhaltstyp zurückzugeben
  • Sie haben beim Schreiben von Vorlagen Zugriff auf alle Helfer
  • Sie können Skript-Tags für "/ template/was auch immer" hinzufügen, mit denen die Vorlage gerendert wird, oder das Routing von Routen für besser organisierte Ansichten verwenden.

Der Vorteil dieses Ansatzes besteht darin, dass Sie, da Ihre Ansichten über Controller zugänglich sind, die Möglichkeit haben, sie als Jst-Templates (über den Templates-Controller) oder über andere Controller als Teilbilder darzustellen. Auf diese Weise können Sie seo-freundliche Seiten direkt von URLs (wie/products/widgets/super-cool-widget) aus bereitstellen, wenn die Benutzer die zwischengespeicherten Vorlagen/templates/widgets/super-cool-widget erhalten.

2
mhamrah

Ich kann auf Craig's Thread nicht inline antworten (ich schätze, ich brauche ein gewisses Ansehen, um vorhandene Antworten zu posten), aber Sie brauchen sich nicht mehr einen Knoten jammit zu nehmen, um haml-js zu verwenden - das Commit hat es geschafft der Hauptzweig von Jammit. Details finden Sie hier: https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

EDIT: Das letzte Edelstein-Release war im Januar und die Commits wurden im März hinzugefügt. Sie müssen also einen Bündler einrichten, der gegen das Github-Repo läuft oder lokal erstellt wird. Wenn Sie HEAD von jammit nicht verwenden, haben Sie Schwierigkeiten, die Vorlagen richtig zu analysieren, da die Zeilenumbrüche entfernt werden.  

Alles was ich brauchte, um das einzurichten, ist:

1) Fügen Sie meiner Datei "assets.yml" Folgendes hinzu: 

template_function: "Haml"

2) Fügen Sie den Quellcode und die Vorlagen von haml-js hinzu, die ich in meine Assets-Datei laden wollte: Javascripts: Core: - public/javascripts/vendor/haml.js Vorlagen: - app/views/events/_form.haml.jst

3) Stellen Sie sicher, dass ich sowohl Core als auch Vorlagen in meine application.html.erb geladen habe

<% = include_javascripts: core,: templates%>

4) Zugriff auf Vorlagen in meinen Quelldateien über JST [Dateiname] (dh in diesem Fall JST ['_ form']). Eine erwähnenswerte Sache - Jammit wird alle Ihre Vorlagen und den Namespace bis zum üblichen Pfad anzeigen. Wenn Sie also app/views/foo/file.jst und app/views/bar/file.jst haben, können Sie darauf zugreifen mit JST ['foo/file.jst'] und JST ['bar/file.jst']. Wenn Sie app/views/foo/file1.jst und app/views/foo/file2.jst hätten, wären diese direkt bei JST ['file1.jst'] und JST ['file2.jst'] - also leicht zu vergessen, wenn Sie mit Ihren ersten Vorlagen beginnen.

Alles hat ganz gut funktioniert. Ich bin mir nicht sicher, warum Craig eine Funktion definieren musste - ich habe nur die von Haml.js bereitgestellte Haml-Standardfunktion verwendet, aber vielleicht fehlt mir etwas. 

1
ragaskar

Sieht aus wie https://github.com/netzpirat/haml_coffee_assets gibt Ihnen, was Sie wollen. (window.JST-Vorlagen, geschrieben in HAML, mit Inline-Coffescript-Unterstützung)

0

Schauen Sie sich Middleman an. Es beinhaltet Haml, Sass, Kaffee, Slim usw. Es verwendet Edelsteine ​​wie Rails und hat viele andere großartige Funktionen.

http://middlemanapp.com/

Sie haben sogar eine benutzerdefinierte Erweiterung für das Backbone, https://github.com/middleman/middleman-backbone

Sie können es auch in statische HTML-, CSS- und JS-Dateien integrieren, um superschnelles Laden zu ermöglichen.

0
Blaine Hatab