2014-01-20 22 views
3

如何保持對其他出口我的路線,使得過渡到另一條路線時到名爲出口

Router.map(function() { 
    this.resource('board', { path: '/boards/:board_id' }, function() { 
    this.route('calendar'); 
    this.route('attachments'); 

    this.resource('card', { path: '/cards/:card_id' }); 
    }); 
}); 

和板模板有兩個出口,一個是默認的,而另一個名爲插座。

/templates/board.hbs

<div id="master-content"> 
    {{outlet}} 
</div> 
<div id="detail-content"> 
    {{outlet 'detail'}} 
</div> 

/routes/card.js

App.Card = Ember.Route.extend({ 
    renderTemplate: function(controller, model) { 
    this.render('card', { outlet: 'detail', controller: controller, into: 'board' }); 
    } 
}); 

當我轉移到board.index或board.calendar或board.attachments,他們的模板會顯示在默認插座中,我想將卡片模板顯示到名爲'detail'的插座中。

這裏我有一個問題。根據Ember的工作原理,當我移動到卡片路線時,卡片模板將進入詳細出口,但另一個默認出口將變空。我想保留默認插座,就像我轉移到卡路線時一樣。

我的第一種方法是擁有一個控制器,用於存儲默認插座中的信息,並在我移動到卡片路線時再次渲染它們。

有關這種情況的任何最佳實踐?

回答

0

我個人從未在Ember中使用過查詢參數(它們仍處於實驗階段,可用於金絲雀版本),但我相信它們非常適合您。

http://emberjs.com/guides/routing/query-params/

您可以使用路由(here)的完全過渡到具有根據從查詢參數的值呈現的模板。

App.CardRoute = Ember.Route.extend({ 

    model: function(params) { 
     this.set('calendar', params.calendar); //assuming calendar it's the name of your query param 
     this.set('attachements', params.attachements); //assuming calendar it's the name of your query param 
    }, 

    renderTemplate: function(controller, model) { 
     this.render('card', { outlet: 'detail', controller: controller, into: 'board' }); 
     if (this.get('calendar')) { 
      this.render('calendar', { controller: 'calendar', into: 'board' }); 
     } else if (this.get('attachements')) { 
      this.render('attachements', { controller: 'attachements', into: 'board' }); 
     } 
    }, 

    actions: { 
     queryParamsDidChange: function() { 
     // This is how we opt-in to 
     // a full-on transition that'll 
     // refire the `model` hook and 
     // give us a chance to reload data 
     // from the server. 
     this.refresh(); 
     } 
    } 
}); 

你的其他選擇是有card資源既是calendarattachments路線的subroute。

我希望這可以幫助你!

相關問題