Как использовать SuperScrolloRama с Backbone.js Views

Question

Я пытаюсь понять, как использовать плагин, такой как http://johnpolacek.github.io/superscrollorama/, с Backbone.js, интегрировав его в мои представления. Я знаю, что мне нужно подключиться к магистральным View-Events, но я хочу сделать горизонтальную прокрутку с плагином, и я не знаю о событии горизонтальной прокрутки. Как я могу все еще использовать плагин? Заранее спасибо за любые идеи.

Просмотры:

var ArtistsView = Backbone.View.extend({ 
    tagName: 'ul',
    initialize: function () {     
        this.cleanUp();   
        $("body").attr('id','artists');
        this.render();
    },


     events: {
      "click div.open" : "largeArtViewOpen",
        "click div.close" : "largeArtViewClose",
     },

    render: function () {
        this.collection.each(function(model) {
            var artistView = new ArtistView({ model: model });
            this.$el.append(artistView.render().el);

        }, this);
        console.log('and a new view was rendered!')
        return this;


    },

    cleanUp: function(){
        if (this != null) {
           this.remove();
           this.unbind();
           console.log('View was removed!');
        } 
    },

    largeArtViewOpen: function(e){
        var thisArt = $(e.currentTarget).parent().attr("class");
            console.log(thisArt);
            $("#open-view, li."+thisArt).show();
        },

    largeArtViewClose: function(e){
        //var thisArt = $(e.currentTarget).parent().attr("class");

        console.log('clicked!');
        $("#open-view, ul#large li").hide();

        },

    scrollFx: function(){

            var controller = $.superscrollorama({
                isVertical:false
            });

            controller.addTween('h2#fade-it', TweenMax.from( $('h2#fade-it'), .5, {css:{opacity: 0}}), 800);
            //$('h2#fade-it').css({'color':'#dbdbdb'});
            console.log('scroll message!');

    },

}); 

var ArtistView = Backbone.View.extend({
    tagName:'li',
    className:'artistLink not-active',

    render: function(){
        this.id = this.model.get('idWord')+"-menu-item";
        this.$el.attr('id', this.id).html(this.template(this.model.toJSON()));
        return this;

    },

});

Answer 1

Итак, за последние 3 дня с тех пор, как я задал этот вопрос, я потратил некоторое время на пробу различных прокручиваемых "целей" для Superscrollorama... "Документ против окна" против "Тела" против других элементов DOM в HTML и Вопросы, которые я должен был рассмотреть, должны ли событие прокрутки быть связано с верхним элементом представления? Должно ли оно быть привязано к телу, но инициализировано в представлении? В обоих случаях, которые я пытался, я не мог заставить события прокрутки непрерывно срабатывать... это может быть просто из-за плохого кода, но я не мог этого сделать.

Итак, я пришел к тому, что полностью избежал представления: я создал экземпляр и вызвал Superscrollorama в функции scrollFx() в отдельном документе helper.js, а затем вызвал scrollFx() из маршрутизатора моего представления.

Я думаю, что я просто опустошу стили цели и отсоединю любые существующие события прокрутки в начале scrollFx(), прежде чем я вызову функцию Superscrollorama, чтобы результирующие стили / анимации прокрутки были очищены, а события не были экспоненциально связаны,

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

Благодарю.