我正在尝试研究如何拥有多个视图切换器,以便我可以有不同的动画过渡。
在我的 Main.js 视图中,我能够使用 & 和 & 视图切换器来调用一个模型,该模型在"显示"+"隐藏"上执行我的页面过渡动画,这些动画附加到我的导航中。
render: function () {
// some additional stuff we want to add to the document head
document.head.appendChild(domify(templates.head()));
var anim = new Anim();
// main renderer
this.renderWithTemplate({me: me});
// init and configure our page switcher
this.pageSwitcher = new ViewSwitcher(this.queryByHook('page-container'), {
waitForRemove: true,
show: function (newView) {
// it's inserted and rendered for me
document.title = _.result(newView, 'pageTitle') || 'cmdv portfolio';
// add a class specifying it's active
anim.fadeElIn(newView.el);
anim.navUp();
// store an additional reference, just because
app.currentPage = newView;
},
hide: function (oldView, newView, cb) {
anim.fadeElOut(oldView.el);
anim.navDown();
setTimeout(cb, 400);
}
});
// setting a favicon for fun (note, it's dynamic)
setFavicon('/images/ampersand.png');
return this;
},
现在我正在尝试在特定页面上使用不同的视图切换器。此页面将充当图库,当项目单击时,您将被带到不同的页面,但带有另一个视图切换器动画。
有没有人对如何做到这一点有任何指示。
& 符号是一个非常棒的工具,但在文档中找不到任何东西,他们拥有的聊天室不适合回答菜鸟。
我认为以下内容应该可以回答您的问题。当您创建新的视图切换器时,第一个参数是将在其中呈现切换视图的元素(在您的情况下this.queryByHook('page-container')
。假设您在某处有其他视图(例如,使用 ViewSwitch 器呈现的视图之一),并且您希望该视图具有另一个视图切换器。然后你应该做与上面显示相同的事情:在render
函数中,你创建新的视图切换器,你把它附加到其他元素上。例如,如果你的观点中你有一个带有data-hook="another-view-switcher"
的div,你会这样做:
this.pageSwitcher = new ViewSwitcher(this.queryByHook('another-view-switcher'), {//and so on
我知道这是老问题,但我的解释回答了吗?