如何在Backbone.js视图中使用SuperScrolloRama

Question

我正在尝试通过将http://johnpolacek.github.io/superscrollorama/集成到我的视图中来理解如何在Backbone.js中使用像http://johnpolacek.github.io/superscrollorama/这样的插件。我知道我需要连接到主干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

所以，在过去的三天里，我问了这个问题，我花了一些时间尝试不同的滚动“目标”的Superscrollorama...Document，窗口，主体和其他DOM元素在超文本标记语言中，我必须考虑的问题是，滚动事件是否应该绑定到视图的顶部元素？它是否应该绑定到正文，但在视图中初始化？在我尝试的两种情况下，我都不能让滚动事件持续fire...this，可能是因为错误的代码，但我不能让它发生。

所以，我得到的结论是，完全避免了视图:我在一个单独的'helper.js‘文档中实例化并调用了一个名为scrollFx()的函数，然后在视图的路由器中调用了scrollFx()。

我想在我调用Superscrollorama函数之前，我应该在scrollFx()的开头清空目标的样式并取消绑定任何现有的滚动事件，这样结果得到的滚动样式/动画就会被清理掉，并且事件不会被指数绑定。

我仍然在努力解决这些问题，尽管现在scroll事件正在工作，所以如果有人碰巧读完了这个思路，请随时补充你的两个想法，特别是如果你有更好的想法在视图中重新实现Superscrollorama函数。

谢谢。