Dynamic Partials

[ghost]

Update: please see pull request for new solution: #242.

Hi,

I might be missing something obvious but can't think of a way to dynamically render a partial based on a value. For example, given the view below:

{
  items: [
    { type: 'image', title: 'Some title' },
    { type: 'text', content: 'Some text' }
  ]
}

I want to dynamically render a partial based on the 'type' key:

{{#items}}
   {{> {{type}} }}
{{/items}}

This obviously won't work but I thing there needs to be some way of doing this. Not sure what the syntax would be, something like the following(?):

{{#items}}
   {{@type}}
{{/items}}

or even...

{{>items:type}}

Currently, the only way to achieve this that I can see is to do the following:

{
  items: [
    { type: 'image', title: 'Some title', is_image: true },
    { type: 'text', content: 'Some text', is_text: true }
  ]
}

{{#items}}
  {{#is_text}}
    {{>text}}
  {{/is_text}}
  {{#is_image}}
    {{>image}}
  {{/is_image?}}
{{/items}}

Someone else has come up against the same problem here: http://stackoverflow.com/questions/2932679/dynamically-render-partial-templates-using-mustache

Kind regards,

Jamie

[ghost]

Thinking about this a little more, how about we allow the > character to be used with collections also. It would automatically look for a partial key for each item e.g.

{
  items: [
    { type: 'image', title: 'Some title', partial: 'image.mustache' },
    { type: 'text', content: 'Some text', partial: 'text.mustache' }
  ]
}

...could be rendered using:

{{>items}}

And if you wanted more control i.e. wrap each partial, we could have:

{{#items}}
  <p>Before</p>
  {{>.}}
  <p>After</p>
{{/items}}

...or, alternate syntax (can't decide):

{{#items}}
  <p>Before</p>
  {{@partial}}
  <p>After</p>
{{/items}}

What do people think? This is a common pattern that comes up and that needs addressing.

Jamie

[thegrandpoobah]

Mustache deals with the dynamic scenario using Higher Order Sections. Basically, you can do the following:

var partials = { text: 'hi', image: 'bye' }
var view = {
    items: [ { type: 'text' }, { type: 'image' } ],
    dyn_partial: function() {
        return function(content, renderer) {
            // note that this points to the current context
            return renderer('{{>' + Mustache.render(content, this) + '}}');
        }
    }
};
var template = '{{#items}}{{#dyn_partial}}{{type}}{{/dyn_partial}}{{/items}}';

Mustache.render(template, view, partials);

This will output:

   hibye

It is a little clunky and the behaviour of higher order sections is not so well defined in the specification, but it works if you understand the limitations and what exactly the /this/ variable is pointing to.

Hope that helps.

[ghost]

That's exactly why I think we need a proper solution to this common scenario as that workaround is ugly as hell.

[ghost]

Please see Pull Request: #242