backbone.js无效滚动/分页

我正在尝试使用Pagination plugin为backbone.js创建一个像Twitter一样的无限滚动功能，点击按钮/链接#pagination a将加载下一页结果后端并将其追加到当前视图PhotoListView。backbone.js无效滚动/分页

问题：我想跟随插件的例子here和来源here。到目前为止，我通过单击链接#pagination a从后端获取JSON数据data。

我如何使用模型 - 视图Backbone.js的结合的追加新的观点photoListItemView到视图photoListView单击视图PaginationView按钮#pagination a什么时候？

我认为，当在paginationView方法appendRender的this.collection.requestNextPage()被调用时，新检索模型将被添加到收藏photoCollection将触发的photoListViewthis.collection.bind('change', this.render, this);事件触发，导致被追加新检索模型？

查看

PhotoListView = Backbone.View.extend({ 
    el: '#photo_list', 

    initialize: function() { 
     this.collection.bind('change', this.render, this); 
     this.collection.bind('add', function() { 
      console.log('added to collection'); 
     }, this); 
    }, 

    render: function() { 
     //$(this.el).html(''); 
     this.collection.each(function(photo, index) { 
      if(index % 7 < 3) { 
       $(this.el).append(new PhotoListItemView({ model: photo }).render().el); 
      } else { 
       $(this.el).append(new PhotoListQuadItemView({ model: photo }).render().el); 
      } 
      console.log('render'); 
     }, this); 
     return this; 
    } 
}); 

PhotoListItemView = Backbone.View.extend({ 
    tagNAme: 'div', 
    className: 'photo_box', 

    template: _.template($('#tpl_PhotoListItemView').html()), 

    initialize: function() { 
     this.model.bind('destroy', this.close, this); 
    }, 

    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
      console.log('render item'); 
     return this; 
    }, 

    close: function() { 
     this.unbind(); 
     this.remove(); 
    } 
}); 

PhotoListQuadItemView = Backbone.View.extend({ 
    tagNAme: 'div', 
    className: 'photo_box', 

    template: _.template($('#tpl_PhotoListQuadItemView').html()), 

    initialize: function() { 
     this.model.bind('destroy', this.close, this); 
    }, 

    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    close: function() { 
     this.unbind(); 
     this.remove(); 
    } 
}); 

PaginationView = Backbone.View.extend({ 
    el: $('#pagination'), 

    events: { 
     'click #pagination a': 'appendRender' 
    }, 

    initialize: function() { 
     this.render(); 
    }, 

    template: _.template($('#tpl_pagination').html()), 

    render: function() { 
     $(this.el).html(this.template()); 
    }, 

    appendRender: function() { 
     this.collection.requestNextPage() 
      .done(function(data, textStatus, jqXHR) { 
       // HOW DO I APPEND THE NEW DATA VIEWS? 
     }); 
    } 
});

收集

PhotoCollection = Backbone.Paginator.requestPager.extend({ 
    model: Photo, 

    paginator_core: { 
      dataType: 'json', 
      url: 'http://www.domain.com/explore/all?' 
     }, 

    paginator_ui: { 
     firstPage: 1, 
     currentPage: 1, 
     perPage: 7, 
     totalPages: 10 
    }, 

    server_api: { 
     '$page': function() { return this.currentPage; } 
    }, 

    parse: function (response) { 
     return response; 
    } 

});

路由器

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '': 'explore' 
    }, 

    initialize: function() { 

    }, 

    explore: function() { 
     console.log('explore!'); 
     this.photoList = new PhotoCollection(); 
     this.paginationView = new PaginationView({ collection: this.photoList }); 
     var self = this; 
     this.photoList.fetch({ 
      success: function() { 
       self.photoListView = new PhotoListView({ collection: self.photoList }); 
       self.photoListView.render(); 

      } 
     }); 
    } 

}); 

var app = new AppRouter(); 
Backbone.history.start();

来源

2012-07-05 Nyxynyx

现在你的PhotoListView如何知道PaginationView被点击？您需要将事件绑定到视图，以便在获取集合时绑定视图以重置事件广告视图自动呈现 – Kishore 2012-07-06 00:03:49

@Kishore我将它绑定到重置事件而不是更改事件，现在它运行良好。谢谢！ – Nyxynyx 2012-07-06 13:31:16

正如阿迪说。绑定到reset事件，它现在起作用。

来源

2012-07-11 02:57:14 Nyxynyx

backbone.js无效滚动/分页

回答

相关问题