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尝试不同的可滚动'目标'...文档与窗口对比身体与HTML中的其他DOM元素如果滚动事件被绑定到View的顶部元素，那么我必须考虑的问题是什么？它应该绑定到身体，但在视图中初始化？在我试过的两种情况下，我都无法连续触发滚动事件......这可能只是因为代码不好，但我无法实现。

所以，我得到的是，完全避开视图：我在一个名为scrollFx（）的函数中实例化并调用Superscrollorama在一个单独的'helper.js'文档中，然后从我视图的路由器中调用scrollFx（）。

我想我会在我调用Superscrollorama函数之前清空目标的样式并取消绑定scrollFx（）开头的任何现有滚动事件，以便清理生成的滚动样式/动画，并且事件不是''以指数方式约束。

我仍然非常努力解决这些问题，虽然现在滚动事件正在发挥作用，所以如果有人碰巧阅读了这一思路，请随意添加你的两个感觉，特别是，如果你有更好的想法关于在View本身中重新实现Superscrollorama功能。

感谢。

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

1 个答案: