与号.js多个视图切换器



我正在尝试研究如何拥有多个视图切换器,以便我可以有不同的动画过渡。

在我的 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

我知道这是老问题,但我的解释回答了吗?

最新更新