假设我有两个观点(paginationview和postsview)和一个集合(postscollection).每当在paginationview中单击.next按钮时,我调用postscollection中的下一个函数,并且post集合从服务器获取新页面的帖子(代码简化了).现在在我的帖子中,我只想显示最后一页的帖子.我不想将我的视图绑定到集合中的“添加”事件,因为有更多的情况是“添加”到集合中.在我的postscollection中调用’nextPage’函数时,我需要在我的postview中调用’renderlist’函数.如何将这些功能连接在一起?
// paginationview
var PaginationView = Backbone.View.extend({ events:{ 'click a.next' : 'next',},next: function() { this.collection.nextPage(); return false; } });
//集合
var PostsCollection = Backbone.Collection.extend({ model: model,initialize: function() { _.bindAll(this,'parse','url','pageInfo','nextPage','prevIoUsPage'); this.page = 1; this.fetch(); },parse: function(response) { console.log(response); this.page = response.page; this.perPage = response.perPage; this.total = response.total; this.noofpages =response.noofpages; return response.posts; },url: function() { return '/tweet/' + '?' + $.param({page: this.page}); },nextPage: function() { console.log("next page is called"); this.page = this.page + 1; this.fetch(); },
// postsview
var PostsView = Backbone.View.extend({ events:{ 'click #testbutton' : 'test','click #allbutton' : 'render',initialize: function() { this.listenTo(this.collection,'add',this.addOne); },render: function() { $(".maincontainer").html(""); this.collection.forEach(this.addOne,this); return this; },renderlist: function(){ $(".maincontainer").html(""); this.collection.forEach(this.addOne,this); },addOne: function(post) { var post = new postView({model : post}); post.render(); this.$el.prepend(post.el); },});