무한 스크롤 백본보기

Question

JSON 피드에서 무한/끝없는 스크롤 데이터 렌더링을하고 싶습니다. 백본/언더 코어/jQuery를 사용하여 Pinterest 또는 Google 리더와 비슷한 것을 성취하는데 관심이 있습니다.

infiniScroll.js 모듈을 백본보기에 어떻게 적용합니까? 목표는 페이지 끝 가까이에서 스크롤 할 때 다음 페이지의 ("페이지"URL 매개 변수) 트윗을 가져 와서 추가하는 것입니다. 문제 : 페이지 하단에 도달하면 동일한 JSON 페이지 피드가 가져옵니다. 등 &page=2로 URL에 page 매개 변수를 변경하는 방법

데모 :http://dl.dropbox.com/u/19974044/test.html 또는

// Define the model 
Tweet = Backbone.Model.extend(); 

// Define the collection 
Tweets = Backbone.Collection.extend({ 
    model: Tweet, 
    // Url to request when fetch() is called 
    url: 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&trim_user=false&count=10&screen_name=cnn&page=1&callback=?', 
    parse: function (response) { 
     return response; 
    }, 
    // Overwrite the sync method to pass over the Same Origin Policy 
    sync: function (method, model, options) { 
     var that = this; 
     var params = _.extend({ 
      type: 'GET', 
      dataType: 'jsonp', 
      url: that.url, 
      processData: false 
     }, options); 

     return $.ajax(params); 
    } 
}); 

// Define the View 
TweetsView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     // create a collection 
     this.collection = new Tweets; 
     // Fetch the collection and call render() method 
     var that = this; 
     this.collection.fetch({ 
      success: function() { 
       that.render(); 
      } 
     }); 
     // infiniScroll.js integration 
     this.infiniScroll = new Backbone.InfiniScroll(this.collection, {success: this.appendRender, param:'page', includePage:true}); 
    }, 
    // Use an extern template 
    template: _.template($('#tweetsTemplate').html()), 

    render: function() { 
     // Fill the html with the template and the collection 
     $(this.el).html(this.template({ 
      tweets: this.collection.toJSON() 
     })); 
    } 
}); 

var app = new TweetsView({ 
    // define the el where the view will render 
    el: $('body') 
});​ 

Answer 1

url 속성 http://jsfiddle.net/k4rPP/3/이 함수가 아닌 문자열로 지정할 수 있습니다. 그래서 이것을 다음과 같이 바꿀 수 있습니다 :

... 
currentPage: 0, 
url: function() { 
    this.currentPage++; 
    return 'https://path.to.url/?page=' + this.currentPage; 
}, 
...