11

假设我有两个视图（paginationview 和 postsview）和一个集合（postscollection）。每当在分页视图中单击 .next 按钮时，我都会调用帖子集合中的下一个函数，并且帖子集合正在从服务器获取新页面的帖子（代码已简化）。现在在我的帖子视图中，我只想显示最后一页中的帖子。我不想将我的视图绑定到集合中的“添加”事件，因为在更多情况下某些东西被“添加”到集合中。我希望我的帖子视图中的 'renderlist' 函数仅在我的帖子集合中调用 'nextPage' 函数时被调用。如何将这些功能连接在一起？

// 分页视图

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();
    },

// 帖子视图

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);
    },
});
4

1 回答 1

14

为此，您可以使用自己的事件。

在 Collection.nextPage 你触发事件：

this.trigger('nextpage');

并在 initiazlie 方法中查看您的函数绑定到此事件：

this.listenTo(this.collection, 'nextpage', this.renderlist);

并且不要忘记将渲染列表的上下文绑定到这个（再次在视图的初始化方法中）：

_.bindAll(this, 'render', 'rederlist');
于 2013-07-10T21:55:09.433 回答