Skip to main content

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 %}



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.


Source: Tips4allCCNA FINAL EXAM

Comments

  1. 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.


    You could use partials:

    {{>header}}
    Hello {{name}}
    {{>footer}}

    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>"
    }
    }
    }

    Prepend and append the desired HTML to the relevant pages in your controller.
    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.
    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.

    ReplyDelete
  2. You could use variables containing HTML. A "triple mustache" like {{{variable}}} will return unescaped HTML. It's not exactly the same as template extensions, but you could render frontpage-content.html and then put its output in a content variable that gets passed to base.html.

    (I added -content to the frontpage.html filename with the expectation that such a naming pattern will help keep the filenames manageable.)

    ReplyDelete
  3. If you're happy with a server-side only code, Nun is a Mustache-like templating system with extends functionality via its 'template overrides' feature - modelled on django. While it works, however, it is no longer maintained by its author.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex