Templates EmberJs:将把手辅助对象中的模板渲染到其父元素中

Templates EmberJs:将把手辅助对象中的模板渲染到其父元素中,templates,ember.js,rendering,handlebars.js,Templates,Ember.js,Rendering,Handlebars.js,因为我在一个变量中有一个视图的名称,所以我使用了一个handlebars助手来渲染它 因此,我有一个对象如下(当然都是简化的) 接下来,我有以下模板 <script type="text/x-handlebars" data-template-name="index"> <div id="container"> {{helperViewRenderer config}} </div> </script> 问题是我试

因为我在一个变量中有一个视图的名称,所以我使用了一个handlebars助手来渲染它

因此,我有一个对象如下(当然都是简化的)

接下来,我有以下模板

<script type="text/x-handlebars" data-template-name="index">
    <div id="container">
        {{helperViewRenderer config}}
    </div>
</script>

问题是我试图将模板插入到id为“container”的元素中,而此时该元素并不存在。解决这个问题的可能性有哪些。例如,是否可以从模板中获取HTML字符串并返回该字符串?

Ember尝试通过使用新路由器创建“outlet”

如果要使用
appendTo
方法,那么显然必须将模板附加到现有的HTML元素中。这样,您就无法从模板中获取HTML字符串(除非您知道它是父模板的一部分)。但是,如果您不太在意将模板插入到何处,那么可以使用直接的
append
,将模板添加到正文的末尾

我认为在您的情况下,最好熟悉路由器,因为您似乎希望在同一个主模板中呈现不同的模板。因此,通过使用URL作为变量,并将相关视图注入到outlet中,您可以轻松地将它们分离出来

App.Router.map(function () {
  this.route("index", { path: "/" });
  this.route("first", { path: "/view1" });
  this.route("another", { path: "/view2" });
});

App.FirstRoute = Em.Route.extend({
  renderTemplate: function () {
    this.render('view1', { outlet: 'main' });
  }
});

App.AnotherRoute = Em.Route.extend({
  renderTemplate: function () {
    this.render('view2', { outlet: 'main' });
  }
});
视图:


{{出口总管}}

这样,您就不需要任何Handlebar助手来传递变量,而且所有这些都被Ember约定巧妙地包装起来。

我偶尔发现,在父视图类中定义子视图类而不是全局视图类很有价值。您可以将任何路径(全局或本地)传递给
视图
帮助器,当前视图在当前上下文中作为
视图
可用。因此,

App.ParentView = Ember.View.extend({
  template: Ember.Handlebars.compile("The parent's child: {{view view.ChildView}}."),

  ChildView: Ember.View.extend({
    template: Ember.Handlebars.compile("-- child view --")
  })
});
谢谢你的答复。是一个JSFIDLE,它以某种方式描述了我的情况。您将如何将您的解决方案应用于这种情况?
App.Router.map(function () {
  this.route("index", { path: "/" });
  this.route("first", { path: "/view1" });
  this.route("another", { path: "/view2" });
});

App.FirstRoute = Em.Route.extend({
  renderTemplate: function () {
    this.render('view1', { outlet: 'main' });
  }
});

App.AnotherRoute = Em.Route.extend({
  renderTemplate: function () {
    this.render('view2', { outlet: 'main' });
  }
});
<script type="text/x-handlebars" data-template-name="index">
    <div id="container">
        {{outlet main}}
    </div>
</script>
App.ParentView = Ember.View.extend({
  template: Ember.Handlebars.compile("The parent's child: {{view view.ChildView}}."),

  ChildView: Ember.View.extend({
    template: Ember.Handlebars.compile("-- child view --")
  })
});