1

I'd like to dynamically render a template, like this:

{{#each layout in layouts}}
   {{render layout.get('type') layout}}
{{/each}}

The problem is that render doesn't expect a variable as its first arguments, so in the older EmberJS-versions, a workaround was possible by registering a helper:

Ember.Handlebars.registerBoundHelper('render_layout', 
  function(callingContext, layout, options) {
    return Ember.Handlebars.helpers.render.call(callingContext, 
                layout.get('type'), 'layout', options);
});

and in the template:

{{#each layout in layouts}}
     {{render_layout this layout}}
{{/each}}

Unfortunately the thing doesn't work in newer ember versions. Ember.Handlebars.helpers.render.call expects 3 arguments but I can not get them right. Any ideas? I've tried: (this, layout.get('type'), options)

and in the template:

{{#each layout in layouts}}
     {{render_layout layout}}
{{/each}}

I get Uncaught TypeError: Cannot read property 'pushChildView' of null

... and many others.

Any suggestions would be greatly appreciated.

Lyubomir
  • 19,615
  • 6
  • 55
  • 69
  • I'd start off by looking at the Ember/HBS source for the `{{render}}` helper and see how it might be tweaked to do what you want. –  Jan 05 '15 at 12:53
  • I already did and tbh (this, layout.get('type'), options) seems to be the correct approach, but apparently I've missed something. – Lyubomir Jan 15 '15 at 12:40

1 Answers1

1

Components allow you to specify layoutName. And you can dynamically compute the layout name based on a parameter passed into the component.

App.XRenderComponent = Ember.Component.extend({
  tagName: "",
  layoutName: function(){
    return this.get('displayLayout.type'); 
  }.property('displayLayout'),
});

Then you can just do

  <script type="text/x-handlebars" id="index">
    {{#each layout in model}}
      {{ x-render displayLayout=layout }}
    {{/each}}   
  </script>

See working example here

Kalman
  • 8,001
  • 1
  • 27
  • 45