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

问题描述

在我的web应用程序，我在左边表的用户列表，并在权限的用户详细信息窗格。当管理员点击一个用户在表格中，其细节应显示在右边。

我有在左侧UserListView和UserRowView，并在右边一个UserDetailView。事情样的工作，但我有一个怪异的行为。如果我点击左侧部分用户，然后单击删除其中的一个，我得到的已经显示的所有用户连续的JavaScript确认框。

它看起来像所有previously显示的观点并未被删除，这似乎是正常的事件绑定。我不应该做一个新的UserDetailView上UserRowView每一次？我应该保持一个视图并更改其参考模型？我应该保持当前视图的轨道，创造一个新的人之前删除它？我有点失去了任何想法会受到欢迎。谢谢！

下面是左视图的code（行显示，单击事件，右视图创建）

  window.UserRowView = Backbone.View.extend（{
    标签名：TR，
    事件：{
        点击：点击
    }，
    渲染：功能（）{
        $（this.el）的.html（ich.bbViewUserTr（this.model.toJSON（）））;
        返回此;
    }，
    点击：函数（）{
        VAR视图=新UserDetailView（{模式：this.model}）
        view.render（）
    }
}）
 

而code右视图（删除按钮）

  window.UserDetailView = Backbone.View.extend（{
    EL：$（＃bbBoxUserDetail），
    事件：{
        点击.delete：deleteUser
    }，
    初始化：功能（）{
        this.model.bind（'破坏'，函数（）{this.el.hide（）}，这一点）;
    }，
    渲染：功能（）{
        this.el.html（ich.bbViewUserDetail（this.model.toJSON（）））;
        this.el.show（）;
    }，
    deleteUser：功能（）{
        如果（确认（真的删除用户+ this.model.get（登录）+？））
            this.model.destroy（）;
        返回false;
    }
}）
 

解决方案

我的博客上讲述这家新近，并呈现几件事情，我在我的应用程序做处理这些情况：

<一个href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/\">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

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.

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.

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屋！