2013-09-24 38 views
0

我想了解如何使用插件像http://johnpolacek.github.io/superscrollorama/,與Backbone.js通過將其集成到我的視圖。我知道我需要掛鉤骨幹視圖事件,但我想用插件進行水平滾動,並且我不知道水平滾動事件。我怎樣才能繼續使用插件?提前感謝任何想法。如何使用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; 

    }, 

}); 

回答

0

所以,在過去3天內,因爲我已經問過這個問題,我花了一些時間嘗試不同的滾動「目標」爲Superscrollorama ...文檔與窗口VS 。body與其他HTML元素中的DOM元素以及我必須考慮的問題是,如果scroll事件綁定到View的頂層元素?它是否應該綁定到身體上,但在視圖中初始化?在這兩種情況下,我嘗試過,我無法讓滾動事件持續啓動......這可能只是由於代碼錯誤,但我無法實現。因此,我完全避免了這個觀點:我在一個單獨的'helper.js'文檔中的一個名爲scrollFx()的函數中實例化並調用Superscrollorama,然後從我的視圖路由器中調用scrollFx() 。

我打算在我調用Superscrollorama函數之前清空目標的樣式並解開任何現有滾動事件的scrollFx()的開頭,以便清除生成的滾動樣式/動畫,並且事件不會不受指數限制。

儘管現在滾動事件正在運行,但我仍然非常努力地解決這些問題,所以如果有人想通讀這一思路,請隨時添加您的兩個感覺,尤其是,如果你有更好的關於在View本身中重新實現Superscrollorama函數的想法。

謝謝。