提问者:小点点

EmberJs:将handlebars-helper中的模板渲染到其父元素中


因为我在变量中有一个View的名称,所以我使用车把助手来渲染它。

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

config = Ember.Object.create({ view: "MyTplView"}) ;

接下来,我有以下模板

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

还有车把助手

Ember.Handlebars.registerBoundHelper('helperViewRenderer', function(value, options) {
    var template = App[value.view].create() ;
    template.appendTo("#container") ;
}) ;

问题是我尝试将模板插入到id为“容器”的元素中,此时不存在。修复此问题的可能性有哪些。例如,是否有可能从模板中获取超文本标记语言-string并返回此内容?


共2个答案

匿名用户

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

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 --")
  })
});

匿名用户

Ember试图通过使用新路由器来创建“插座”。

如果您想使用appendTo方法,那么显然您必须将模板附加到现有的超文本标记语言元素中。这样,您无法从模板中获取超文本标记语言字符串(除非您知道它是父模板的一部分)。但是,如果您不太关心插入模板的位置,那么您可以使用直接的append将模板添加到正文的末尾。

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

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>

通过这种方式,您不需要任何传递变量的车把助手,并且它都整齐地包装在Ember约定中。