我想在 Ember JS 中创建一个滑动 UI,其中新输入路线的视图部分滑过前一条路线的视图。一条路线必须有可能使用不同的模型多次激活。请参阅本文末尾的示例。
我无法将其安装到 Ember 路由和渲染系统中。到目前为止,请参阅此 JSFiddle 以了解我所尝试的内容。它基本上链接到具有随机 ID 的新面板路由。
我创建了一个 containerOutlet 助手,它将新视图呈现到 ContainerView 中,而不是常规的 OutletView。这可行,但是当输入相同的“面板”路由时,它不会创建新的控制器/视图对,而只是更改当前模型上的模型。
是否可以实例化一个新的控制器/视图对并将其“渲染”到 ContainerView 插座?
感觉 Ember 不是为此而设计的,我正在与系统作斗争,所以任何提示或澄清都会有所帮助。
例子
Spotify 在他们的网络播放器中非常有品位地做到了这一点。我附上了一些截图来更好地解释它。
基本上,当过渡到新路线时,它会被渲染成一个新的“层”,该“层”会滑过前一条路线。比较前图像和后图像。
前一个视图仍然存在,当单击前一个路由时应用程序会转换回来。这可以无限次重复以创建保留“路线”历史的分层 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')
});