Question

这可能是一个相当微不足道的问题，但作为一个Ember初学者，我正在努力解决它。

我正在构建的网站有一个父导航，但其出口内的一些模板可能有自己的导航和他们自己的插座（至少这是我想要的）。换句话说，我可能会喜欢（跳过很多HTML）：

<script type="text/x-handlebars" data-template-name="application">
    <nav>
        <ul class="nav">
            <li>{{#link-to 'index'}}Home{{/link-to}}</li>
            <li>{{#link-to 'testing'}}Testing{{/link-to}}</li>
        </ul>
    </nav>
    <div>{{outlet}}{/div>
</script>

<script type="text/x-handlebars" data-template-name="testing">
    <ul class="nav">
        <li>{{#link-to 'testing.encoding'}}Encoding{{/link-to}}</li>
        <li>{{#link-to 'testing.user'}}User Admin{{/link-to}}</li>
    </ul>
    <div>{{outlet}}{/div>
</script>

<script type="text/x-handlebars" data-template-name="testing/encoding">
    <h3>Encoding</h3>
</script>

<script type="text/x-handlebars" data-template-name="testing/user">
    <h3>User Admin</h3>
</script>

应用程序模板很好。点击“主页”，即可获得index模板;点击“测试”，即可获得testing模板。超。我想要的是当他们点击“编码”时，路由是/ testing / encoding，testing/encoding模板在testing内的插座中呈现。我的路由器看起来像这样：

App.Router.map(function() {
    this.route('testing', function() {
        this.route('encoding');
        this.route('users');
    });
});

然而，页面根本不会加载，只给我：Uncaught Error: There is no route named encoding.index。我怀疑我的模板名称不当，或者我的路由器配置不正确，或者可能需要在outlet模板中命名testing ...而且我已经攻击了这些潜在问题，但还未到来决议。

想法？这可能是一个典型的模式，可能有一个干净，简单的解决方案与最小的JavaScript。我想，我只是没有看到它。

Answer 1

您希望路由器看起来像这样。

App.Router.map(function() {
    this.resource('testing', function() {
        this.route('encoding');
        this.route('users');
    });
});

您无法在路线下筑巢路线。您获得的资源是索引，加载和错误的叶子路由。

此路由器中没有路由encoding.index。

这里的routing guide非常有帮助。

干杯

Answer 2

对于一个你没有正确命名你的路线（它应该是this.route('encoding');而不是this.route('encode');。但更大的问题是Ember不允许嵌套路由，只允许嵌套资源（和嵌套在资源中的路线。）

The Ember docs说：“你不能嵌套路线，但你可以嵌套资源。”

商店内的嵌套路线和商店

2 个答案: