Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Template inheritance with Node.js, Handlebars and Express

I'm just getting started with Node.js, so I'm building very simple applications in order to practice the basics. I was trying to get some Django-like template inheritance working, but I'm at a bit of a loss on how to do it.

I understand that the library "express-handlebars" includes the concept of layouts, and I thought that might be the best way to go about it, but at first glance I don't know if it allows more than one step of inheritance, or using it for replacing different blocks (I saw one general layout where the other templates are inserted in place of the {{{body}}} tag, although there may very well be more tricks to it).

So, my question: how would one implement a multi-layered template inheritance (also, with children inserting content into different separate blocks, instead of a single one)? I'm using Node.js, Express and handlebars, but if it's not possible with the latter two I don't mind trying out other frameworks or templating languages.

Thanks!

Edit:

A pseudo-coded example of what I mean:

First, we could have a common outer template:

<html>
    <head></head>
    <body>
        <h1> Main Title </h1>
        <h2> {{section name block}} </h2>
        <h3> {{subsection name block}} </h3>
        {{content block}}
    </body>
</html>

then another one under it (middle template), substituting some of the outer one's blocks (and potentially adding other ones):

{{inheriting from outer template}}
{{section name block}} Section Three {{/block}}

and finally an inner one, which would be the one to call from the javascript code:

{{inheriting from middle template}}
{{subsection name block}} Subsection Two {{/block}}
{{content block}}
    <p>This is the content of Section Three, Subsection Two.</p>
{{/block}}

The result when processing the inner template would be:

<html>
    <head></head>
    <body>
        <h1> Main Title </h1>
        <h2> Section Three </h2>
        <h3> Subsection Two </h3>
        <p>This is the content of Section Three, Subsection Two.</p>
    </body>
</html>
like image 332
Ninethousand Avatar asked Mar 04 '15 19:03

Ninethousand


Video Answer


2 Answers

It not 100% clear what you're asking for with the term "inheritance" for templates, but handlebars templates can include templates which can include other templates which can include templates so you can nest as deep as you want.

For example, I just use the syntax:

{{> common_header}}

to embed the common_header template inside of the current template. That common_header could itself embed other templates in it and so on.


You can also use layouts (discussed here) which allows you to have a master-like template which different content can be rendered into.


FYI, there's a discussion of a Django-like template inheritance using Handlebars here and here and a layouts extension for Handlebars here and more discussion of using layouts in Handlebars here.


like image 90
jfriend00 Avatar answered Sep 28 '22 06:09

jfriend00


Swig seems to have that functionality

http://paularmstrong.github.io/swig/docs/#inheritance

Haven't personally used it but looks like the same inheritance syntax as PHP's Twig, so should be OK

like image 31
Reda El Khattabi Avatar answered Sep 28 '22 05:09

Reda El Khattabi