ember.js - 渲染模板如何将自定义模板渲染到路由使用的默认模板中定义的导出中。

Question

我有一个场景，在特定 route ，我有两个导出，在同一条 route ，我想在两个不同的导出中显示两个不同的模板。

详情模板:

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

但是这两个模板不会在这两个导出中呈现，而是直接在根元素中呈现。

我的问题的 fiddle 是 http://jsfiddle.net/anshulguleria/eCTtu/

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

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 的一个 bug，我觉得你可以在 github 上发个 issue。

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