Question

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

明细模板：

 <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中我希望这两个temlates在灰色区域渲染。因此，在浏览链接时，我的渲染模板不会被移除并一次又一次地渲染。

Answer 1

您的details路由位于顶层，因此在render函数中调用renderTemplate而未指定into选项时，它会尝试在顶级模板（即在application模板中）。您可以在this JSFiddle中看到它。

如果您使用的是嵌套路线，则会在父模板（AFAIK）中搜索它们。

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

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

it works!

编辑

看起来Ember希望application模板具有{{outlet}}。它似乎是Ember中的一个错误，我想你可以在github上发布一个问题。

我已更新the link above以添加应用程序模板。

渲染模板如何将自定义模板渲染到路径使用的默认模板中定义的插座中。

1 个答案: