javascript - ampersand.js 多 View 切换器

Question

我正在尝试弄清楚如何拥有多个 View 切换器，以便我可以拥有不同的动画过渡。

在我的 Main.js View 中，我可以使用 &view-switcher 来调用一个模型，该模型在“显示”+“隐藏”上执行页面转换动画，并且这些动画附加到我的导航中。

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;
},

现在我尝试在特定页面上使用不同的 View 切换器。此页面将像一个画廊一样，当单击项目时，您将被带到另一个页面，但具有另一个 View 切换器动画。

有谁知道如何实现这一点吗？

& 符号确实是一个很棒的工具，但在文档中找不到任何内容，而且他们的聊天室不适合回答菜鸟问题。

Answer 1

我认为下面应该可以回答你的问题。当您创建新的 View 切换器时，第一个参数是将在其中渲染切换 View 的元素(在您的情况下是 this.queryByHook('page-container') 。假设您有一些某处的其他 View (例如，使用 ViewSwitcher 渲染的 View 之一)，并且您希望该 View 有另一个 View 切换器。那么您应该执行与上面所示相同的操作:在 render 函数中创建新的 View 切换器，将其附加到其他元素。例如，如果在您的 View 中有一个带有 data-hook="another-view-switcher" 的 div，您可以这样做:

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

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