ampersand.js переключатели нескольких представлений

Question

Я пытаюсь понять, как использовать несколько переключателей вида, чтобы у меня были разные анимационные переходы.

В моем представлении Main.js я могу использовать ampersand-view-switcher для вызова модели, которая выполняет анимацию перехода моей страницы на "show" + "hide", и они прикреплены к моей навигации.

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

Я думаю, что следующее должно ответить на ваш вопрос. Когда вы создаете новый View Switcher, первый аргумент - это элемент, внутри которого будут отображаться ваши переключенные представления (это this.queryByHook('page-container') в твоем случае. Допустим, у вас есть какое-то другое представление (например, одно из представлений, отображаемых с помощью ViewSwitcher), и вы хотите, чтобы у этого представления был другой переключатель представлений. Затем вы должны сделать то же самое, как показано выше: внутри render Функция, которую вы создаете новый переключатель вида, который вы присоединяете к другому элементу. Например, если по вашему мнению у вас есть div с data-hook="another-view-switcher"вы бы сделали:

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

Я знаю, что это старый вопрос, но ответит ли мое объяснение на него?