ampersand.js多视图切换器

Question

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

在我的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;
},

现在，我正在尝试在特定页面上使用不同的视图切换器。这个页面就像一个图库，当点击项目时，你将被带到一个不同的页面，但带有另一个视图切换器动画。

有没有人对如何做到这一点有什么建议。

Ampersand是一个非常棒的工具，但在文档中找不到任何东西，而且他们的聊天室也不适合回答新手。

Answer 1

我认为下面的内容可以回答你的问题。当您创建新的视图切换器时，第一个参数是将在其中呈现切换视图的元素(在本例中为this.queryByHook('page-container')。假设您在某个地方有其他视图(例如，使用ViewSwitcher呈现的视图之一)，并且您希望该视图有另一个视图切换器。然后，您应该执行如上所示的相同操作:在render函数中创建新的视图切换器，并将其附加到其他一些元素上。例如，如果在您的视图中有一个包含data-hook="another-view-switcher"的div，您应该这样做：

this.pageSwitcher = new ViewSwitcher(this.queryByHook('another-view-switcher'), {//and so on

我知道这是个老生常谈的问题，但我的解释能回答它吗？