1

我有一个与路由相关的问题。

App.Router.map(function(){
    this.resource('whiteBoards',function(){
        this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
            this.resource('image');
            this.resource('video');
          });
    });
    this.resource('dummy');
});

App.WhiteBoardsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('whiteBoard');
    }
});
App.ImageRoute =  Ember.Route.extend({
    model: function(){
        return this.store.find('image');
    }
});

如果我手动单击所有导航链接，所有事情都会按预期工作。

我的模板：

<script type="text/x-handlebars" data-template-name="application">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">

            <!-- Be sure to leave the brand out there if you want it shown -->
            <a class="navbar-brand" href="/index.html">Routing Test</a>
        </div>

        <ul class="nav navbar-nav">
            <li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
            <li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>

        </ul>

        </div>

       </nav>

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="whiteBoards">

    <ul class="nav nav-tabs whiteBoards">

        {{#each whiteBoard in controller.content}}

        <li>
            {{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
        </li>
        {{/each}}
    </ul>

    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="whiteBoard">
    <div class="whiteBoard">
        <H3>WhiteBoard   {{controller.content.name}}</H3>
    </div>
    <ul class="nav nav-tabs">
        <li>
            {{#link-to 'image'}}Images{{/link-to}}
        </li>
        <li>
            {{#link-to 'video'}}Videos{{/link-to}}
        </li>
    </ul>
 {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="image">
    <div class="imagelist">
        <H3>Images</H3>
        <ul>
            {{#each img in controller.content}}
            <li>{{img.name}}</li>
            {{/each}}

        </ul>
    </div>
</script>

如果我尝试结合白板导航单击激活图像路由（作为默认子路由），则会出现问题。这意味着如果我选择白板，还应显示图像列表（此处仅显示简化的图像列表）。

为此，我插入：

App.WhiteBoardIndexRoute =  Ember.Route.extend({
    redirect: function(){
        this.transitionTo('image');
    }
});

第一次按预期工作（显示选定的白板和图像列表）。如果我尝试导航到另一个白板，问题就开始了。插入 WhiteBoardIndexRoute 后，我无法导航到另一个白板。问题是什么 ？

我正在使用 ember.js 版本 1.0

我知道我可以使用 WhiteBoardRoute 中的 renderTemplate 方法实现图像列表的显示，但我认为应该可以使用“默认子路由概念”。

4

0 回答 0