Client-Side (JavaScript) Django/Jinja-like template inheritance

Question

I'm looking for a way to do template inheritance to a group of .html files I have.

Let's say I have a base.html file which has the common HTML for all pages of my website, i.e. header, footer, etc. . Each page, including the main (index) page, needs to inherit from this template HTML file.

Now, this is doable on the server-side using Django's Jinja template langauge. But this is not a good solution for me. My HTML pages are stored remotely and I have no control over the server storing them. This must be done client-side, with or without JavaScript.

Somebody asked about this before, and the only half-baked solution I found was to use Mustache's partials, which doesn't really do the job.

Does anybody know of a way to do this on the client-side?

Answer 1

1. Yes, with Dustjs you can "have a template inherit the bulk of its content from a common base template".

Check out the Dustjs docs, here: Dustjs, the "Blocks and Inline Partials" section.

(I posted an answer to a related question, here: https://stackoverflow.com/a/12432034/694469 )

---

2. There's also some work in progress on adding template inheritance to Handlebars, see another answer of mine to "the other version" of this question: https://stackoverflow.com/a/12432490/694469.

It links to this GitHub issue: https://github.com/wycats/handlebars.js/issues/208, and this blog post: Template Inheritance for Handlebars

Answer 2

I just released this for the same purpose: https://github.com/ericclemmons/jinja.js

Answer 3

Jade offers full template inheritance: https://github.com/visionmedia/jade#a11

In addition to overriding a block entirely, you can also append or prepend content to a block. Here is an example hijacked from the documentation:

Define a base template in layout.html:

html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Append some script tags and replace the content section in content.html:

extends layout

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

Answer 4

jQuery Template have a {{wrap}} template tag which can be used for this.