ember.js - 将Handlebars模板作为变量传递给Handlebars模板

我遇到一种情况，需要渲染用户创建的Handlebars模板。我已经能够找到一种解决方案:使用 View 将用户生成的模板+上下文编译为HTML，然后将生成的字符串提供给“最终”模板。

我希望能够仅将模板作为变量显示给“最终”模板，并让最终模板对其进行评估，就好像它是实际的HBS代码一样。但是，如果我使用三括号{{{，则(当然)转义了车把变量。

还有另一种方法吗？也许是一个帮助程序，它首先在某些上下文中编译变量，然后输出字符串？唯一的问题是Ember.Handlebars已连接到Ember。我只需要最终的未绑定(bind)HTML。

最佳答案

一种可能的方法是使用专用于呈现用户定义模板的view。然后，通过设置其template变量并重新呈现它，模板可以动态更改。

例，

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

hbs

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="test">
    this is the test,

    {{view view.userTemplate}}

    <button {{action "changeTemplate" 1 target="view"}}>change to Template 1</button>
    <button {{action "changeTemplate" 2 target="view"}}>change to 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 is a parent variable",
  userTemplate:App.UserTemplateView.create(),
  actions:{
    changeTemplate:function(templateId){
      if(templateId===1){
        this.get("userTemplate").set("template",Ember.Handlebars.compile("this is template 1 <b>{{view.parentView.parentVar}}</b>"));
        this.get("userTemplate").rerender();
      }else{
        this.get("userTemplate").set("template",Ember.Handlebars.compile("this is template 2 <b>{{view.parentView.parentVar}}</b>"));
        this.get("userTemplate").rerender();
      }
    }
  }
});

这也可以通过使用ContainerView，http://emberjs.com/guides/views/manually-managing-view-hierarchy/来实现

例，
http://emberjs.jsbin.com/luzufixi/1/edit

编辑-使用帮助程序补充Sam Selikoff的评论和好的解决方案

这是使用先前概念的又一个粗略示例，以及路由器和{{view}}帮助器的模型，后者由通用View对象即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 -在所需的上下文中调用{{view}}帮助器，如果它包含template属性，则初始默认模板将更改。

{{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 is template 1 <b>{{view.parentView.parentVar}},param from context of model:{{someParams.param1}}</b>",someParams:{param1:"p1",param2:"p2"}};
    }else{
      return {template:"this is template 2 <b>{{view.parentView.parentVar}},param from 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 is a parent variable"
});