Ember.js: 如何让子路由显示在父资源中

Question

最近我一直在阅读 ember 文档并尽我所能。感谢上帝，我取得了很好的进步，但最近我在路由方面遇到了麻烦。具体来说，我可以让模板显示在应用程序模板中，但我无法让子路由显示在父资源模板中。相反，子模板实际上取代了它。这是我的代码：

index.html

<script type="text/x-handlebars" data-template-name="modals">
        <h2>Modals Parent Route</h2>
       <p>This is the modals route which is common to all modals</p>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="modals/layout">
       <h2>Layout Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/visuals">
       <h2>Visuals Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/finish">
       <h2>Finish Route</h2>
    </script>
    <script type="text/x-handlebars" data-template-name="modals/preview">
       <h2>Preview Route</h2>
    </script>

App.js

App.Router.map(function(){
    this.resource('modals', { path:'/modals' }, function(){
    this.route('layout');
    this.route('visuals');
    this.route('finish');
    this.route('preview');
    });
});
App.LayoutRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('modals.layout',{
           into: 'modals',
        });
    }

这不是完整的代码，但我认为这是与该主题相关的所有内容。如果您需要完整的文件内容，请随时问我。

Answer 1

如果你想要嵌套模板，你需要嵌套路由。

this.resource('parent', function() {
  this.route('child');
});

参见：http://guides.emberjs.com/v1.10.0/routing/defining-your-routes/#toc_nested-resources

Answer 2

您正在使用的 renderTemplate 方法完全覆盖了 modals 的模板，这就是为什么，摆脱它。 Ember 为您处理模板的呈现，您尝试实现的基本功能不需要它。

Answer 3

所以我使用了 ember-cli 并最终想出了一个方法来让它工作。我使用 ember-cli g 路由来生成我的路由。我运行它为我的每条路线一次，除了应用程序。之后一切正常。这是某人为我创建的 git 存储库，它将帮助任何遇到同样问题的人：https://github.com/mooror/mooror。谢谢大家

Ember.js: 如何让子路由显示在父资源中

Ember.js: How to make children routes display in the parent resource

javascript

ember.js

ember-router