Über mich | Kontakt | Archiv

Thomas Bandt

Dieses Blog wird nicht mehr gepflegt. Zur neuen Website!

Node.js: View-Engine Handlebars und Sections à la ASP.NET

Wer einmal mit ASP.NET gearbeitet hat, wird ein Konzept kennen und nicht mehr missen wollen: Content Placeholder (WebForms) bzw. Sections (MVC bzw. Razor).

So kann man z.B. in einem Razor-Layout-File Folgendes definieren:

@RenderSection("meta", required: false)

In einer View, die dieses Layout verwendet, kann man nun

@section meta
{
}

aufrufen. Der Teil, den man nun innerhalb der geschweiften Klammern einfügt, wird nun genau an der Stelle im Layout eingefügt, in dem @RenderSection eingebunden ist.

Der Vorteil liegt auf der Hand: auf diesem Weg lassen sich seitenspezifische Inhalte “von unten nach oben” durchgeben, und so beispielsweise eigene Scripts oder Styles rendern.

Wer mit Node.js arbeitet, kann nun aus einer Vielzahl an mehr oder minder an Funktionen reichhaltigen View-Engines wählen. Eine beliebte Engine ist handlebars. Mit einer gut lesbaren Syntax für einfache Anweisungen ausgestattet, lassen sich damit die allermeisten Aufgaben gut und effizient bewältigen.

Wo ich heute steckengeblieben bin, waren aber jene aus Razor bekannten Sections. Es gibt in handlebars ganz offensichtlich keinen einfachen, integrierten, Weg hierfür. Aber zum Glück bin ich nicht der einzige mit dieser Anforderung gewesen, weshalb sich dann nach endlosem Googlen doch noch eine Lösung aufgetan hat.

Man registriere die View-Engine (in dem Fall express-handlebars) und den Helfer:

var handlebars = require("express-handlebars");

var configuredHandlebars = handlebars.create({
    helpers: {
        section: function(name, options){
            if(!this.sections) {
                this.sections = {};
            }

            this.sections[name] = options.fn(this);

            return null;
        }
    }
});

app.engine("handlebars", configuredHandlebars.engine);
app.set("view engine", "handlebars");

Eh voilá, im Layout lässt sich nun Folgendes verwenden:

{{{sections.head}}}

und über

{{#section 'head'}}
{{/section}}

In der View verwenden. Der Inhalt kommt in diesen Block rein. Ganz wie in ASP.NET.



« Zurück  |  Weiter »