10

私のインデックステンプレートには2つのアウトレットがあります。1つはヘッダー用、もう1つはコンテンツ用です。コンテンツにレンダリングされるテンプレートは、表示されているコンテンツに応じて変化します。

connectOutlet古いルーターでは、これは、そのテンプレートを所有するさまざまなコントローラーを呼び出すことで実行できました。新しいルーターで同じことを行う方法がわかりません。

助言がありますか？

4

2 に答える 2

17

私の調査で、私はこれに到達しました：あなたがこのように定義されたルーターを持っているとしましょう：

App.Router.map(function(match) {
  match('/').to('index');
});

ApplicationTemplate：

<script type="text/x-handlebars">
{{outlet header}}
{{outlet}}
</script>

IndexTemplate：

<script type="text/x-handlebars" data-template-name="index">
{{outlet dashboard}}
{{outlet spaces}}
</script>

ここで、ユーザーがインデックスルーターにアクセスすると、ページは次のようになります。

  • インデックスをメインアウトレットにレンダリングし、ヘッダーをアプリケーションテンプレートのヘッダーアウトレットにレンダリングします。
  • ダッシュボード、スペーステンプレートをインデックステンプレートにレンダリングします。

これを実現するために、indexRouteに次のコードを記述します

App.IndexRoute = Em.Route.extend({
    renderTemplate: function(controller, model){
        //Render header into header outlet
        this.render('header',{
            outlet:'header'
        });
        //Render index into main outlet. If you comment out 
        //this line, the code below fails
        this.render('index');

        //by using into, we can render into the index template
        //Note: The controller is optional.if not specified,
        //ember picks up controller for the given template.
        this.render('dashboard',{
            outlet:'dashboard',
            into:'index',
            controller:this.controllerFor('somethingElse', App.TestModel.find())
        });
        //controller is SpacesController
        this.render('spaces',{
            outlet:'spaces',
            into:'index'
        });
    }
});
于 2013-01-09T09:13:07.843 に答える
11

ルータのrenderTemplates関数を使用して、複数のビューをレンダリングしてアウトレットに名前を付けることができます。

renderTemplates:function () {
   this.render('todos_list', {
       into:'todos', //template name
       outlet: 'todos', //named outlet
       controller: 'listController' //controller you want to use
   });
   this.render('todos_test', {
       into:'todos',
       outlet: 'test',
       controller: 'testController'
   });
},

setupControllers:function (controller, model) {
   this.controllerFor('list').set('content', listmodel.find());
   this.controllerFor('test').set('content', testmodel.find());
}

setupControllerControllerFor関数を使用すると、前のルーターで「コンテキスト」として設定したものを割り当てることができます。

テンプレートでは、以前と同じようにアウトレットに名前を付けます。

{{outlet list}}
{{outlet test}}

お役に立てれば ：）

于 2013-01-06T10:36:20.947 に答える