Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can Mustache Templates do template extension?

I'm new to Mustache.

Many templating languages (e.g., Django / Jinja) will let you extend a "parent" template like so...

base.html

<html><head></head>     <body>     {% block content %}{% endblock %}     </body> </html> 

frontpage.html

{% extends "base.html" %} {% block content %}<h1>Foobar!</h1>{% endblock %} 

rendered frontpage.html

<html><head></head>     <body>     <h1>Foobar!</h1>     </body> </html> 

I'm aware of Mustache's partials (e.g., {{>content}}), but those seem to be just includes.

Does template extension exist for Mustache? Or, failing that, is there at least some design pattern that effectively turns includes into template extension equivalents.

like image 329
Chris W. Avatar asked Oct 28 '11 06:10

Chris W.


People also ask

Is Mustache a template engine?

Mustache is a logicless template engine for creating dynamic content like HTML, configuration files among other things.

What is Mustache extension?

Mustache is a logic-less templating system. It permits you to use pre-written text files with placeholders that will be replaced at run-time with values particular to a given request.

What is in Mustache template?

A mustache template is a string that contains any number of mustache tags. Tags are indicated by the double mustaches that surround them. {{person}} is a tag, as is {{#person}} . In both examples we refer to person as the tag's key.

What is Mustache JS used for?

Mustache is a simple web template system. It is available for many programming languages including JavaScript and Java. Mustache is described as a logic-less template engine because it does not have any explicit control flow statements, such as if and else conditionals or for loops.


2 Answers

I recently found myself in the same boat, except I came from a mako background.

Mustache does not allow for template extension/inheritance but there are a few options available to you that I know of.

  1. You could use partials:

    {{>header}}     Hello {{name}} {{>footer}} 
  2. You could inject template pre-processing functions into the context for each template that needs to inherit from some other page:

    {{#extendBase}}           Hello {{name}} {{/extendBase}}  

    Hash:

    {    "name": "Walden",    "extendBase": function() {        return function(text) {            return "<html><head></head>" + render(text) + "</body></html>"        }    } } 
  3. Prepend and append the desired HTML to the relevant pages in your controller.

  4. Have a layout template ala:

    {{>header}}     {{{body}}} {{>footer}} 

    And render the body in your controller, passing that to the layout template as a variable named body.

  5. Implement template inheritance, pre-mustache, in your code that loads templates.

I wouldn't, however, use the triple mustache because I don't want unescaped HTML to be appearing anywhere, it's just too risky in my opinion.

If someone else has a better solution to this problem I'd love to hear it as well, since I haven't yet taken the plunge in any one of these directions.

like image 68
Walden Avatar answered Sep 23 '22 05:09

Walden


I've proposed this to the specification for Mustache here:

https://github.com/mustache/spec/issues/38

Currently mustache.java, hogan.js and phly_mustache support template inheritance.

like image 40
Sam Pullara Avatar answered Sep 21 '22 05:09

Sam Pullara