Ember.jsアウトレットをモーダルウィンドウとしてレンダリング

Question

私はモーダルをレンダリングしようとしています。そのために、{{outlet modalOutlet}}を使用してカスタムアウトレットを作成しました。私のアプリケーションテンプレートには、2つのアウトレット、デフォルトのアウトレットとmodalOutletがあります。しかし、モーダルテンプレートが{{outlet modalOutlet}}にレンダリングされると、私のデフォルトの{{outlet}}は空になります。

デフォルト{{アウトレット}}が変更されないように、どのように私は、それを変更しないので、私は実際にモーダルウィンドウとして{{outlet modalOutlet}}をレンダリングすることができ、またはI「はレイアウト

の一環として、サイドバーなどこれが私のコードによるものなのかどうかわからない、または私が紛失しているrenderTemplate()メソッドに関するもの。 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' 
     }); 
    } 
});