问题描述
在我的 Web 应用程序中,我的左侧表格中有一个用户列表,右侧有一个用户详细信息窗格.当管理员点击表格中的用户时,其详细信息应显示在右侧.
In my web application, I have a user list in a table on the left, and a user detail pane on the right. When the admin clicks a user in the table, its details should be displayed on the right.
我左边有一个 UserListView 和 UserRowView,右边有一个 UserDetailView.事情有点工作,但我有一个奇怪的行为.如果我单击左侧的一些用户,然后单击其中一个用户的删除,我会得到所有已显示用户的连续 javascript 确认框.
I have a UserListView and UserRowView on the left, and a UserDetailView on the right. Things kind of work, but I have a weird behavior. If I click some users on the left, then click delete on one of them, I get successive javascript confirm boxes for all users that have been displayed.
看起来之前显示的所有视图的事件绑定都没有被移除,这似乎是正常的.我不应该每次都在 UserRowView 上创建一个新的 UserDetailView?我应该维护视图并更改其参考模型吗?我应该跟踪当前视图并在创建新视图之前将其删除吗?我有点迷茫,任何想法都会受到欢迎.谢谢!
It looks like event bindings of all previously displayed views have not been removed, which seems to be normal. I should not do a new UserDetailView every time on UserRowView? Should I maintain a view and change its reference model? Should I keep track of the current view and remove it before creating a new one? I'm kind of lost and any idea will be welcome. Thank you !
这里是左视图的代码(行显示、点击事件、右视图创建)
Here is the code of the left view (row display, click event, right view creation)
window.UserRowView = Backbone.View.extend({
tagName : "tr",
events : {
"click" : "click",
},
render : function() {
$(this.el).html(ich.bbViewUserTr(this.model.toJSON()));
return this;
},
click : function() {
var view = new UserDetailView({model:this.model})
view.render()
}
})
以及右视图(删除按钮)的代码
And the code for right view (delete button)
window.UserDetailView = Backbone.View.extend({
el : $("#bbBoxUserDetail"),
events : {
"click .delete" : "deleteUser"
},
initialize : function() {
this.model.bind('destroy', function(){this.el.hide()}, this);
},
render : function() {
this.el.html(ich.bbViewUserDetail(this.model.toJSON()));
this.el.show();
},
deleteUser : function() {
if (confirm("Really delete user " + this.model.get("login") + "?"))
this.model.destroy();
return false;
}
})
推荐答案
我最近写了一篇关于这个的博客,并展示了我在我的应用程序中为处理这些场景所做的一些事情:
I blogged about this recently, and showed several things that I do in my apps to handle these scenarios:
这篇关于Backbone.js:重新填充或重新创建视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!