Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Nice approach to nested layouts #138

Closed
trans opened this Issue · 7 comments

5 participants

@trans

I think I just came up with a cool way to support nested layouts without the end-user having to do anything special in view code. Mustache could support layouts in much the same way it supports partials but instead of using {{> it would use {{# ... {{/ style.

Here is an example. Say we have a layout like so:

<!-- layout.mustache -->
<html>
  <head></head>
  <body>
    {{{yield}}}
  </body>
</html>

Then a template:

<!-- example.mustache -->
{{#> layout}}
    <div id="content">
      <p>Blah blah blah ...</p>
    </div>
{{/ layout}

Notice the > after the #. That's the key. The end result of rendering example.mustache would be:

<!-- example.mustache -->
<!-- layout.mustache -->
<html>
  <head></head>
  <body>
    <div id="content">
      <p>Blah blah blah ...</p>
    </div>
  </body>
</html>

I would love to use nested layouts like this, instead of my current approach using {{> header}} ... {{> footer}}.

@judofyr

Template-Toolkit calls this a wrapper which maybe makes more sense than "layout".

But yeah, what does the all-mighty @defunkt say? :-)

@pvande

It's an interesting approach, but the two-sigil tag type would be a distinct departure from convention. I've incorporated this suggestion into the issue tracking this feature in the Mustache spec.

@aumgn

What about '<' :

<!-- example.mustache -->
{{<layout}}
    <div id="content">
      <p>Blah blah blah ...</p>
    </div>
{{/layout}

Or another solution: introduce template inheritance like in django and symfony.

For example :

<!-- layout.mustache -->
<html>
  <head>
    <title>{{&title}}Default Title{{/title}}</title>
  </head>
  <body>
    {{{&content}}}
  </body>
</html>

and

<!-- example.mustache -->
{{< layout}}
{{^title}}Title{{/title}}
{{^content}}
    <div id="content">
      <p>Blah blah blah ...</p>
    </div>
{{/contents}}

would result in :

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="content">
      <p>Blah blah blah ...</p>
    </div>
  </body>
</html>
@pvande

The difference between {{> template}} and {{< template}} is subtle, and would stand to confuse many people. In fact, some Mustache implementations currently treat both angle brackets the same for just that reason.

Assuming that you don't intend the sigils in your second example to have their current meanings, that's not an unattractive option. One .NET implementation I've seen uses {{< template}} ... {{/ template}} as a mechanism for describing partials inline, which would also supply most of the behavior needed. I'll add this suggestion to the list.

@trans

Personally, I don't mind the two-character sigil as it makes sense as a combination of block and partial. But obviously an alternative single-character would be fine. I agree though, < might be too easily confused. It's too bad that ^ was used for inverted condition, it would make a very good candidate here if available (I would have used ! for that myself.)

Also, I don't think inheritance is the best approach. It's probably a bit too flexible b/c it let you squirrel partials away where they can be hard to find.

@locks locks referenced this issue
Closed

Nested Layout #135

@bobthecow

Check out mustache/spec#38 and mustache/spec#75 for an implementation with quite a bit of support (four languages and counting).

@trans

Well, it's clear to me the template inheritance is the way of the future. I'm not too keen on all the proposed syntax for it though. Honestly, I don't see why it needs any special syntax for substitutions. In any case, that's a point for those other issues.

@trans trans closed this
@lukesarnacki lukesarnacki referenced this issue from a commit
@minad minad fixed #138 3d4e52e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.