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?

Eric · Accepted Answer · 2012-01-31 03:44:47Z

9

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

answered Jan 31, 2012 at 3:44

Eric

2,0972 gold badges16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:06:06Z

2

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 14, 2012 at 21:18

KajMagnus

11.8k17 gold badges87 silver badges133 bronze badges

Comments

dokkaebi · Accepted Answer · 2013-05-28 21:16:00Z

1

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

answered May 28, 2013 at 21:16

dokkaebi

9,2003 gold badges46 silver badges60 bronze badges

Comments

Udi · Accepted Answer · 2011-08-10 18:20:54Z

0

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

answered Aug 10, 2011 at 18:20

Udi

30.8k9 gold badges105 silver badges134 bronze badges

1 Comment

Ory Band Over a year ago

I don't think this allows template inheritance, just the same behaviour like Mustache's partials. Are you sure about that?

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related