因为我在变量中有一个View的名称,所以我正在使用一个把手帮助器来渲染它。
所以,我有一个如下对象(当然都是简化的)
config = Ember.Object.create({ view: "MyTplView"}) ;
接下来,我有以下模板
<script type="text/x-handlebars" data-template-name="index">
<div id="container">
{{helperViewRenderer config}}
</div>
</script>
和Handlebars帮手
Ember.Handlebars.registerBoundHelper('helperViewRenderer', function(value, options) {
var template = App[value.view].create() ;
template.appendTo("#container") ;
}) ;
问题是我尝试将模板插入到id为“container”的元素中,此时该元素不存在。有什么可能解决这个问题。例如,是否可以从模板中获取HTML字符串并将其返回?
答案 0 :(得分: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 --")
})
});
答案 1 :(得分:1)
Ember尝试通过使用新路由器来创建“出口”。
如果您想使用appendTo
方法,那么显然您必须将模板附加到现有HTML元素。这样,您就无法从模板中获取HTML字符串(除非您知道它是父模板的一部分)。但是,如果您对插入模板的位置不太感兴趣,那么您可以使用直线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惯例中。