javascript - 1 つのルートを同時に複数回アクティブにすることはできますか? (非シングルトンコントローラー)

Question

Ember JS で、新しく入力されたルートのビューが前のルートのビューを部分的にスライドするスライド UI を作成したいと思います。ルートは、異なるモデルで複数回アクティブにできる必要があります。例については、この投稿の最後を参照してください。

これを Ember ルーティングおよびレンダリング システムに適合させるのに問題があります。これまでに試したことについては、この JSFiddle を参照してください。基本的にランダムな ID を持つ新しいパネル ルートにリンクします。

新しいビューを通常の OutletView ではなく ContainerView にレンダリングする containerOutlet ヘルパーを作成しました。これは機能しますが、同じ「パネル」ルートに入ると、新しいコントローラー/ビューのペアは作成されず、現在のモデルのモデルが変更されるだけです。

代わりに、新しいコントローラー/ビューのペアをインスタンス化して、ContainerView アウトレットにレンダリングすることは可能でしょうか?

Ember はこのように設計されていないように感じます。私はシステムと戦っています。そのため、ヒントや説明があれば役に立ちます。

---

例

Spotify は、Web プレーヤーでこれを非常に上品に行っています。よりよく説明するために、いくつかのスクリーンショットを添付しました。

基本的に、新しいルートに移行するときは、前のルートをスライドする新しい「レイヤー」にレンダリングされます。変更前の画像と変更後の画像を比較します。

前のビューはまだそこにあり、前のルートをクリックすると、アプリケーションは元に戻ります。これを無制限に繰り返すことで、「ルート」履歴を保持する階層化された UI を作成できます。

---

コード

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

App = Ember.Application.create({});

App.Router.map(function () {
    this.route("panel", {
        path: "/:panel_id"
    });
});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        random = getRandomInt(1, 10);
        return { nextPanelId: random };
    }
});

App.PanelRoute = Ember.Route.extend({
    model: function (params) {
        random = getRandomInt(1, 10);
        return {
            id: params.panel_id,
            nextPanelId: random
        };
    }
});

Ember.Handlebars.registerHelper('containerOutlet', function (property, options) {
    //(..)
    //Only this line has been changed
    return Ember.Handlebars.helpers.view.call(this, Ember.ContainerOutletView, options);
});

Ember.ContainerOutletView = Ember.ContainerView.extend({
    //For some reason it breaks when I remove this observer
    _currentViewWillChange: Ember.beforeObserver(function () {}, 'currentView'),

    _currentViewDidChange: Ember.observer(function () {
        this.pushObject(this.get('currentView'));
    }, 'currentView')
});