javascript 主干自定义事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17579539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone Custom Events
提问by Gorkem Yurtseven
Let's say I have two views (paginationview and postsview) and a collection (postscollection). Whenever the .next button is clicked in the paginationview I am calling the next function in the postscollection and the post collection is fetching the new page's posts from the server (code is simplified). Now in my post view, I only want to display the posts that are in the last page. I don't want to bind my view to the 'add' event in the collection because there are more cases that something is 'added' to the collection. I want my 'renderlist' function in my postsview only to be called when the 'nextPage' function is called in my postscollection. How do I connect these to functions together?
假设我有两个视图（paginationview 和 postview）和一个集合（postscollection）。每当在分页视图中单击 .next 按钮时，我都会调用帖子集合中的下一个函数，帖子集合正在从服务器获取新页面的帖子（代码已简化）。现在在我的帖子视图中，我只想显示最后一页中的帖子。我不想将我的视图绑定到集合中的“添加”事件，因为在更多情况下会向集合“添加”某些内容。我希望我的帖子视图中的“渲染列表”函数仅在我的帖子集合中调用“nextPage”函数时才被调用。我如何将这些与功能连接在一起？
// paginationview
// 分页视图
var PaginationView = Backbone.View.extend({
events:{
'click a.next' : 'next',
},
next: function() {
this.collection.nextPage();
return false;
}
});
// collection
// 收藏
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);
},
});
回答by Artem Volkhin
You can use your own event for this purpose.
为此，您可以使用自己的事件。
In Collection.nextPage you fire the event:
在 Collection.nextPage 中触发事件：
this.trigger('nextpage');
and in view in initiazlie method you bind your function to this event:
并在 initiazlie 方法中查看您将函数绑定到此事件：
this.listenTo(this.collection, 'nextpage', this.renderlist);
And also don't forget to bind context of renderlist to this (again in initialize method of view):
并且不要忘记将渲染列表的上下文绑定到这个（再次在视图的初始化方法中）：
_.bindAll(this, 'render', 'rederlist');
