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