7

我有一个场景，在特定路线中，我有两个出口，在同一路线中，我想在两个不同的出口中显示两个不同的模板。

详细模板：

 <script type="text/x-handlebars" data-template-name="details">
    Details Template
    {{#linkTo "index"}}Home{{/linkTo}}
    <hr/>
    <h4>DETAILS</h4>
    <hr/>
    <div class='outletArea'>
    {{outlet "detailsList"}}
    </div>
    <hr/>
    <div class='outletArea'>
    {{outlet "detailsMatrix"}}
    </div>
</script>

路线定义为：

App.DetailsRoute = Ember.Route.extend({
renderTemplate: function () {
    this._super();//to render the details temlate whch has outlets
    this.render('detailsList', { outlet: 'detailsList' });//render the list in list outlet
    this.render('detailsMatrix', { outlet: 'detailsMatrix' });//rendet the matrix in matrix outlet
    }
});

但是这两个模板并没有在这两个出口中呈现，而是直接在根元素中呈现。

我的问题的小提琴是http://jsfiddle.net/anshulguleria/eCTtu/

就像在 jsfiddle 中一样，我希望这两个模板在灰色区域中呈现。因此，当通过链接时，我渲染的模板不会被删除并一次又一次地渲染。

4

1 回答 1

9

你的details路由在顶层，所以当在没有指定选项的情况下调用render它的函数时，它会尝试在顶层模板中（即在模板中）找到这些出口。你可以在这个 JSFiddle中看到它。renderTemplateintoapplication

如果您在嵌套路由中，它会在父模板 (AFAIK) 中搜索它们。

因此，您只需添加如下into选项：

this.render('detailsList', { outlet: 'detailsList', into: 'details' });
this.render('detailsMatrix', { outlet: 'detailsMatrix', into: 'details' });

它有效！

编辑

看起来 Ember 期望有一个application具有{{outlet}}. 这似乎是 Ember 中的一个错误，我认为您可以在 github 中发布一个问题。

我更新了上面的链接以添加应用程序模板。

于 2013-01-30T07:24:19.100 回答