Ember.js渲染插座作爲模態窗口

Question

我試圖渲染模態。爲此，我使用{{outlet modalOutlet}}創建了自定義插座。我的應用程序模板有兩個插座，默認插座和modalOutlet。但是，當模態模板呈現爲{{outlet modalOutlet}}時，我的默認{{outlet}}變爲空。

我如何改變它，使默認{{口}}不會改變，所以我其實可以呈現{{outlet modalOutlet}}爲模態窗口，或作爲一個側邊欄的佈局

我的一部分m不知道這是由於我的代碼，還是有關我缺少的方法。該jsFiddle with my code is here。

// Router 
App.Router.map(function(){ 
    this.route('contributors'); 
    this.route('contributor', {path: '/contributors/:contributor_id'}); 
}); 


App.ContributorsRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Contributor.all(); 
    }, 
}); 

App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      outlet: 'modalOutlet' 
     }); 
    } 
}); 

<script type="text/x-handlebars" data-template-name="application"> 
    <nav> 
     {{#linkTo "index"}}Home{{/linkTo}} 
     {{#linkTo "contributors"}}Contributors{{/linkTo}} 
    </nav> 
    <div style='padding:5px;margin:5px;border:1px dotted red;'> 
     Default Outlet 
     {{outlet}} 
    </div> 
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>  
     modalOutlet 
     {{outlet modalOutlet}} 
    </div> 
</script> 

Answer 1

你必須給予contributors模板爲好，因爲當你轉換到一個同級路徑默認出口被清除。

但是，您可以避免這種情況，如果你的巢的路線是這樣的：

App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.route('show', {path: ':contributor_id'}); 
    }); 
}); 

...和調整您的應用程序的其他部分相匹配的新的結構。在這種情況下，您需要指定modalOutlet所在的位置into選項（在這種情況下爲'application'）

Answer 2

問題是你的路由結構不是嵌套的，一旦你嵌套你的路由，你將需要指定包含模式插座的路由。

正在發生的事情是你渲染

應用程序 - >提供者

，以顯示你的列表中，但是當你點擊一個鏈接，你現在渲染

應用 - >投稿人

一個d Contributor模板被刪除。

如果你的巢的路線，像這樣：

應用程序 - >提供者 - >貢獻者

然後，你將仍然有Contributors模板顯示列表。

updated JSFiddle

//Router 
App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.resource('contributor', {path: '/:contributor_id'}); 
    }); 
}); 

//Route 
App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      into: 'application', 
      outlet: 'modalOutlet' 
     }); 
    } 
});