Как использовать Backbone для простой анимации?

#javascript #backbone.js

Вопрос:

У меня есть 3 простых анимации в моем веб-приложении, где я не попадаю на сервер и не нужно сохранять состояние страницы.

Это простое выпадающее меню, лист страницы и лист панели, который в основном представляет собой небольшую страницу с in the page.

Могу ли я смоделировать их в Backbone. Скорее, я должен моделировать их в backbone?

Вот пример моей страницы flipper:

 /***************************************************************************************************
*/
    var Page = $A.Class.create('public', {
        Name: 'Page',

        // (P)roperties
        P: {
            page_previous:  null,
            head_previous:  null
        },

        // (Css) Classes
        C: {
            visible:        'inline',
            invisible:      'none'
        },

        // (E)lements
        E: {

            // body types
            body_splash:     '#body_splash',
            body_main:       '#body_main',
            body_settings:   '#body_settings',

            // heading types
            heading_splash:  '#heading_splash',
            heading_main:    '#heading_main'
        },

        // main, splash, settings
        flip : function (input) {
            var page_current,
                head_current;

            if (!input) {
                input = 'splash';
            }
            if (input === 'main') {
                $A.Event.trigger('main_flipped');
            }

            // set page and header based on input - update this later
            page_current =  this.E['body_'   input];

            if (input === 'settings') {
                head_current =  this.E.heading_main;
            } else {
                head_current = this.E['heading_'   input];
            }

            $A(page_current).fade();
            head_current.style.display = 'inline';

            // Turn off previous page / header
            if (this.P.page_previous !== null amp;amp; this.P.page_previous !== page_current) {
                this.P.page_previous.style.display = 'none';
            }
            if (this.P.head_previous !== null amp;amp; this.P.head_previous !== head_current) {
                this.P.head_previous.style.display = 'none';
            }

            // Update previous page / header
            this.P.page_previous = page_current;
            this.P.head_previous = head_current;
        }
    });

1. что вы подразумеваете под моделью?

2. вы можете просто использовать анимации, как обычно. т.е. при рендеринге : $('.yourView').fadeIn() .

3. С анимацией связана определенная логика. Я опубликовал класс page flipper выше.

Ответ №1:

вы можете выполнять подобные задачи с помощью backbone.marionette . В этом репозитории github вы можете найти несколько примеров выпадающих меню и листовок страниц.