Templates und Themes in einer Backbone.js App mit Require.js

Vor kurzem stand ich vor der Aufgabe, für eine Backbone.js AMD-App mehrere Oberflächen zu erstellen. Als Module-Loader wurde require.js verwendet.
Alles kein Problem, solange man nur unterschiedliche CSS-Dateien braucht. Dann ändert man vor dem Build (oder sogar im Build Script) den Pfad zur CSS Datei und ist glücklich.
Hier waren es aber zum Großteil auch Unterschiede im Markup. Es mussten also Templates her.

Mit Hilfe des Require.js Text Plugins kann man die Templates wunderbar in externe Dateien auslagern und dann in den Views laden.
Wir können also folgende Ordnerstruktur anlegen:

app
 |_ ...
 |_ views
 |_ themes
    |_ default
       |_ templates
       |_ styles
       |_ ...
    |_ my-custom-template
       |_ templates
       |_ styles
       |_ ...

Nun können unsere Templates in den entsprechenden Ordnern erstellt werden. Aber wie können wir nun unserer App sagen, wo sie denn bitte die Templates herholen soll? Eine globale Variable funktioniert zwar, aber leider nicht mit dem r.js Optimizer.
Statt dessen können wir aber ganz leicht einen Pfad in der require.js config anlegen:

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'jquery',
                'underscore'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: 'lib/jquery/jquery.min',
        underscore: 'lib/underscore/underscore',
        backbone: 'lib/backbone/backbone',
        text: 'lib/requirejs-text/text',
        themeTemplateBase: 'pfad/zu/themes/default/templates',
        themeViewBase: 'pfad/zu/themes/default/views'
    }
});

Besonders wichtig sind hier die Pfade »themeTemplateBase« und »themeViewBase«. Nun können wir in der View einfach schreiben:

define([
    'jquery',
    'underscore',
    'backbone',   
    'text!themeTemplateBase/my-view.html'
], function ($, _, Backbone, MyViewTemplate) {
...

Und schon wird das Template aus dem »default« Theme geladen. Will man nun ein anderes Theme verwenden, kann man einfach den Pfad in der Config anpassen. Wer es ganz elegant mag, kann auch ein entsprechendes Build-Script erstellen, in dem die Ersetzung automatisch vorgenommen wird, bevor r.js angestoßen wird.

Auf gleichem Wege lassen sich auch ganze Views Theme-abhängig laden.


Ähnliche Artikel

Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.