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

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模板中).你可以在这个JSFiddle中看到它.

如果您处于嵌套路由中,则会在父模板(AFAIK)中搜索它们.

因此,您只需添加如下into选项:

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

和它的作品!

编辑

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

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