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

Question

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

我希望能够将模板作为变量公开给“最终”模板，并让最终模板对其进行评估，就好像它是实际的 HBS 代码一样；但如果我使用三重大括号 {{{， Handlebars 变量(当然)会被转义。

还有其他方法可以做到这一点吗？也许是一个助手，首先用一些上下文编译变量，然后输出字符串？这里唯一的问题是 Ember.Handlebars 已连接以与 Ember 一起使用；我只需要最终的、未绑定(bind)的 HTML。

Answer 1

一种可能的方法是使用 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"
});