Ember.js渲染出口作為模態窗口

Question

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

如何更改它，以便默認{{outlet}}不會更改，因此我實際上可以將{{outlet modalOutlet}}渲染為模態窗口，或作為邊欄作為布局的一部分

我不確定這是由於我的代碼，還是我缺少的renderTemplate()方法。 我的代碼的jsFiddle就在這里 。

// 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.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributors');
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

但是，如果您像這樣嵌套路線，則可以避免這種情況：

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

...並調整應用程序的其余部分以匹配新結構。 在這種情況下，您需要使用into選項指定modalOutlet所在的位置（在本例中為'application' ）

Answer 2

問題是您的路由結構沒有嵌套，一旦您嵌套路由，您將需要指定包含模態出口的路由。

發生的事情是你渲染

申請 - >貢獻者

顯示您的列表，但是當您單擊現在正在渲染的鏈接時

應用程序 - >貢獻者

並刪除了Contributor模板。

如果您嵌套路線，如下所示：

申請 - >貢獻者 - >貢獻者

然后，您仍然會有顯示列表的Contributors模板。

更新了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'
        });
    }
});