如何从我的骨干视图中解除所有socket.io事件？
我有一个包含两个主干视图的页面（与两个模板相关的视图）。 我正在改变另一个视图上不同项目的点击事件的一个视图的内容。 为此，每次我点击一个视图中的任何项目时，我只是创建另一个视图的实例，其中包含一些socket.io事件。 在第一次它工作的很好，但每次我点击第一个视图上的项目时，它只是创建第二个实例，以便所有socket.io事件都具有约束力。 除了每次点击第一个视图上的项目并调用一个socket.io事件时，第一次点击都会触发不止一次，这取决于我对不同项目执行的点击次数。
我知道每次单击一个项目时，它都会使用socket.io事件绑定创建一个视图的实例。 但我无法解开之前的socket.io事件。
我试图使用这个参考：Backbone.js查看删除和解除绑定但它不适用于我的情况。 可能是我没有以适当的方式使用它。
任何人都可以请给我一个解决方案或方法来解除绑定之前所有的socket.io事件？
这里是我从哪里创建另一个视图的新实例，其中所有socket.io事件绑定的点击事件。
LoadQueueDetails: function (e) {
e.preventDefault();
var queues = new Queues();
queues.fetch({
data: $.param({ Code: this.model.get("QueueCode") }),
success: function () {
$("#grid21").html(new SearchResultListView({ collection: queues }).el);
},
error: function (queues) {
alert('error found in fetch queue details');
}
});
}
这里是我实际的观点，我绑定了所有的socket.io事件。
window.SearchResultListView = Backbone.View.extend({
initialize: function () {
this.collection.on('change', this.render, this);
this.render();
},
render: function () {
var Queues = this.collection;
var len = Queues.length;
$(this.el).html(this.template());
for (var i = 0; i < len; i++) {
$('.QueueListItem', this.el).append(new SearchResultListItemView({ model: Queues.models[i]}).render().el);
}
return this;
}
});
window.SearchResultListItemView = MainView.extend({
tagName: "tr",
initialize: function () {
this.__initialize();
var user;
if ($.super_cookie().check("user_cookie")) {
this.user = $.super_cookie().read_JSON("user_cookie");
}
this.model.bind("change", this.render, this);
this.model.on("destroy", this.close, this);
socket.emit('adduser', this.user.UserName, this.model.get("Code"));
},
events: {
"click a": "JoinQueue"
},
onClose: function(){
this.model.unbind("change", this.render);
},
close: function () {
this.remove();
this.unbind();
this.model.unbind("change", this.render);
},
socket_events: {
"updatechat": "updatechat",
"changeroom": "changedroom"
},
changedroom: function (username, data) {
alert(data);
socket.emit('switchRoom', data);
},
updatechat: function (username, data) {
alert(username);
alert(data);
},
JoinQueue: function (e) {
e.preventDefault();
if ($.super_cookie().check("user_cookie")) {
user = $.super_cookie().read_JSON("user_cookie");
}
socket.emit('sendchat', "new user");
},
render: function () {
var data = this.model.toJSON();
_.extend(data, this.attributes);
$(this.el).html(this.template(data));
return this;
}
});
window.Queue = Backbone.Model.extend({
urlRoot: "/queue",
initialize: function () {
},
defaults: {
_id:null,
Code: null,
ServiceEntityId: null,
ServiceEntityName:null,
Name: null,
NoOfWaiting: null,
ExpectedTimeOfService: null,
Status: null,
SmsCode: null
}
});
window.Queues = Backbone.Collection.extend({
model: Queue,
url: "/queue",
initialize: function () {
}
});
Backbone.View.prototype.close = function () {
this.remove();
this.unbind();
if (this.onClose) {
this.onClose();
}
}
这是我在searchResultItemview中绑定socket.io事件的主要视图。
var MainView = Backbone.View.extend({
initialize: function () {
this.__initialize();
},
__initialize: function () {
if (this.socket_events && _.size(this.socket_events) > 0) {
this.delegateSocketEvents(this.socket_events);
}
},
delegateSocketEvents: function (events) {
for (var key in events) {
var method = events[key];
if (!_.isFunction(method)) {
method = this[events[key]];
}
if (!method) {
throw new Error('Method "' + events[key] + '" does not exist');
}
method = _.bind(method, this);
socket.on(key, method);
};
}
});
有关额外信息：
1. I am opening socket connection globally. Like this :
var socket = io.connect('http://localhost:3000');
我正在等待任何建议或解决方案来摆脱这个问题。 请随时询问任何问题。
基本上你必须在关闭视图时为每个socket.on执行socket.removeListener 。
您可以更新您的MainView并添加一个close方法。
这就是它在我的代码中的样子（CoffeeScript）
close: ->
self = @
_.each @socket_events, (method, key) ->
method = self[self.socket_events[key]]
socket.removeListener key, method
上一篇: How to unbind all the socket.io events from my backbone view?