0

我试图通过将其集成到我的视图中来了解如何将http://johnpolacek.github.io/superscrollorama/之类的插件与 Backbone.js 一起使用。我知道我需要挂钩到主干视图事件，但我想用插件做一个水平滚动，我不知道水平滚动事件。我怎样才能仍然使用该插件？提前感谢您的任何想法。

意见：

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;

    },

});
4

1 回答 1

0

因此，在我提出这个问题后的过去 3 天里，我花了一些时间为 Superscrollorama 尝试不同的可滚动“目标”......文档、窗口、正文和 HTML 中的其他 DOM 元素，以及我必须考虑的问题是，滚动事件是否应该绑定到视图的顶部元素？它是否应该绑定到主体，但在视图中初始化？在我尝试的两种情况下，我都无法让滚动事件连续触发……这可能只是由于代码错误，但我无法实现。

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

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

我仍然在努力解决这些问题，虽然现在滚动事件正在工作，所以如果有人碰巧阅读了这个思路，请随意添加你的两种感觉，特别是，如果你对重新-有更好的想法在视图本身内实现 Superscrollorama 功能。

谢谢。

于 2013-09-27T20:33:04.353 回答