Backbone.js:重新填充或重新创建视图? [英] Backbone.js : repopulate or recreate the view?

问题描述

在我的 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:

http:///lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

这篇关于Backbone.js:重新填充或重新创建视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！