在同一頁面上處理兩個獨立的內容容器

Question

我正在使用ember.js開發單頁面應用程序。我有一個具有兩個不同內容部分的儀表板，它們彼此獨立（因此它不是主/從關係）。

的結構是這樣的（使用Haml的）：

#dashboard 
    #top 
    %nav 
    .content 
    #bottom 
    %nav 
    .content 

在這兩種#top返回和#bottom網頁還有一點導航其中獨立地改變#top返回和#bottom網頁的內容。什麼是餘燼方式

1. 負荷儀表板的初始狀態（與#top返回和#bottom網頁默認的內容），使用相應的導航#top返回或#bottom網頁
2. 加載新的內容。將新內容加載到#top不應更改或刪除#bottom中已存在的內容，反之亦然。

我仍然在學習ember.js。我希望這個問題有道理。

Answer 1

如果你想使這些不同的儀表盤狀態路由（表達爲網址），你需要拿出一個URL方案，允許獨立導航。假設頂部和底部部分都可以具有「foo」，「bar」或「baz」作爲當前窗格。我建議

/dashboard/foo;bar 

或

/dashboard/foo+bar 

既然你選擇了一個URL方案，你需要告訴路由器如何序列化和反序列化方案。資源路線期望的模型，所以我們假的：

App.DashboardPages = Ember.Object.extend({ 
    top: Ember.required(), 
    bottom: Ember.required(), 
}); 

App.Router.map(function() { 
    this.resource('dashboard', { path: '/dashboard/:pages' }); 
}); 

App.DashboardRoute = Ember.Route.extend({ 
    model: function(params) { 
    // TODO: error handling for bad URLs 

    var pages  = params.pages.split('+'); 

    return App.DashboardPages.create({ 
     top: pages[0], 
     bottom: pages[1] 
    }); 
    }, 

    serialize: function(model) { 
    return { 
     pages: "%@+%@".fmt(model.get('top'), model.get('bottom')) 
    }; 
    } 
}); 

然後，在你DashboardController，您可以根據DashboardPages「模特」接孩子的意見。