一条路线可以同时多次激活吗? (非单件控制器)

时间:2013-08-16 20:08:56

标签: javascript ember.js routes ember-router outlet

我想在Ember JS中创建一个滑动UI,其中新输入的路线的视图部分滑过上一个路线的视图。必须可以使用不同的模型多次激活路径。有关示例,请参阅本文末尾。

我无法将其安装到Ember路由和渲染系统中。 See this JSFiddle for what I've tried so far.它基本上链接到具有随机ID的新面板路径。

我创建了一个containerOutlet帮助器,它将一个新视图呈现为ContainerView而不是常规的OutletView。这是有效的,但是当进入相同的“面板”路线时,它不会创建新的控制器/视图对,而只是更改当前模型上的模型。

是否可以实例化一个新的控制器/视图对并将其渲染到ContainerView插座中?

感觉Ember不是为此而设计的,我正在与系统作斗争,所以任何提示或澄清都会有所帮助。


示例

Spotify在他们的web player中做得非常有品味。我附上了一些截图来更好地解释它。

基本上,当转换到新路线时,它会渲染为一个新的“图层”,可以滑过上一个路线。比较before imageafter image

上一个视图仍然存在,应用程序在单击上一个路径时转换回来。这可以无限次重复,以创建保留“路线”历史记录的分层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')
});

0 个答案:

没有答案