ember.js - Passing in a Handlebars template as a variable to a Handlebars template -

i have situation need render handlebars template created user. i've been able hack 1 solution: using view compile user-generated template + context html, making resulting string available "final" template.

i'd prefer able expose template variable "final" template, , have final template evaluate if actual hbs code; if use triple braces {{{, handlebars variables (of course) escaped.

is there way this? helper perhaps, first compiles variable context, outputs string? problem here ember.handlebars wired work ember; need final, unbound html.

one possible approach use view dedicated rendering user defined template. setting template variable , re-rendering it, template change dynamically.

example,

http://emberjs.jsbin.com/yexizoyi/1/edit

hbs

<script type="text/x-handlebars">     <h2> welcome ember.js</h2>      {{outlet}}   </script>    <script type="text/x-handlebars" data-template-name="test">     test,      {{view view.usertemplate}}      <button {{action "changetemplate" 1 target="view"}}>change template 1</button>     <button {{action "changetemplate" 2 target="view"}}>change template 2</button>   </script> 

js

app.router.map(function() {   this.route("test"); });  app.indexroute = ember.route.extend({   beforemodel: function() {     this.transitionto("test");   } });  app.usertemplateview = ember.view.extend({   template:ember.handlebars.compile("initial default template <b>{{view.parentview.parentvar}}</b>") });  app.testview = ember.view.extend({   parentvar:"this parent variable",   usertemplate:app.usertemplateview.create(),   actions:{     changetemplate:function(templateid){       if(templateid===1){         this.get("usertemplate").set("template",ember.handlebars.compile("this template 1 <b>{{view.parentview.parentvar}}</b>"));         this.get("usertemplate").rerender();       }else{         this.get("usertemplate").set("template",ember.handlebars.compile("this template 2 <b>{{view.parentview.parentvar}}</b>"));         this.get("usertemplate").rerender();       }     }   } }); 

this implemented using containerview, http://emberjs.com/guides/views/manually-managing-view-hierarchy/

example, http://emberjs.jsbin.com/luzufixi/1/edit

edit - supplement comments , solution of sam selikoff using helper

this 1 more rough example of using previous concept, along model of router , {{view}} helper backed generic view object, i.e. previewtemplateview .

http://emberjs.jsbin.com/tonapaqi/1/edit

http://emberjs.jsbin.com/tonapaqi/1#/test/1

http://emberjs.jsbin.com/tonapaqi/1#/test/2

hbs - calling {{view}} helper desired context if contains template property, initial default template change.

{{view app.previewtemplateview contextbinding="this"}} 

js

app.router.map(function() {   this.route("test",{path:"test/:tmpl_id"}); });  app.indexroute = ember.route.extend({   beforemodel: function() {     this.transitionto("test",1);   } }); app.testroute = ember.route.extend({   model:function(params){     if(params.tmpl_id==1){       return {template:"this template 1 <b>{{view.parentview.parentvar}},param context of model:{{someparams.param1}}</b>",someparams:{param1:"p1",param2:"p2"}};     }else{       return {template:"this template 2 <b>{{view.parentview.parentvar}},param context of model:{{someparams.param2}}</b>",someparams:{param1:"p1",param2:"p2"}};     }   }  });  app.previewtemplateview = ember.view.extend({     template:ember.handlebars.compile("initial default template"),   init:function(){     this._super();     this.refreshtemplate();   },   refreshtemplate:function(){     this.set("template",ember.handlebars.compile(this.get("context").get("template")));     this.rerender();   }.observes("context.template") });  app.testview = ember.view.extend({   parentvar:"this parent variable" });