javascript - 事件保持绑定(bind)到僵尸实例

Question

我面临着一个看起来像僵尸引用案例的情况。

首先，这是我正在使用的代码。

在这里您可以找到我的用户详细信息管理器布局 gist

相反，可以找到 Controller here

操作流程如下:

1. 管理员在点击 Controller 上调用“manageUsers”的路线后即可访问用户列表。
2. 管理员点击用户行，系统会触发“users:selected”事件，并且监听器会接收要使用的用户实例。
3. DetailsLayout 在应用程序的主布局中实例化并呈现。具体来说在其“内容”区域。
4. 处理用户详细信息表单的 View 也会被实例化并在内部呈现DetailsLayout 的“dettagli”区域。
5. 此时，管理员有兴趣管理该用户的注释。于是他点击在标有“注释”的选项卡上，注释列表将呈现在 DetailsLayout“注释”区域中。
6. 点击管理员想要使用的注释会触发事件“notes:selected”，该事件会将注释实例传递给相应的事件处理程序 (DetailsLayout.showNote)。

此时，一旦管理员单击触发 DetailsLayout.showUsers 的链接，该链接又触发上述 Controller 监听的事件“users:index”，他回到上面列表的第 1 点。

重复整个过程直到第 5 点可以按预期工作，但是一旦管理员选择要工作的注释，调试器会显示有关未定义 DetailsLayout 区域“注释”的错误。

逐步运行代码，我发现第二次运行时触发的事件是正确绑定(bind)到 DetailsLayout 的正确实例，但点 6 除外，该点仍然绑定(bind)到第一次传递时使用的实例。

上面的代码显示，每次显示用户的详细信息时，都会创建一个新的DetailsLayout 实例。这难道还不足以保证周围没有丧尸吗？如果我从backbone.marionette文档中没记错的话，每次layout.region.show()被击中时，它都会关闭前一个 View (解除绑定(bind)事件和所有其余的)并附加新通过的 View 。

我做错了什么？

预先感谢您的帮助。问候

附注

Backbone.marionette 版本为 0.8.4

Backbonejs版本是0.9.2

Answer 1

UserDetailsList 中的构造函数是问题所在:

            constructor: (@user) ->
                console.addHistory("DetailsLayout","INIT")
                super()
                Hub.vent.on("notes:selected",(note) => @showNote(note))
                Hub.vent.on("notes:show", => @showNotes())
                Hub.vent.on("notes:save", (note) => @saveNote(note))
                Hub.vent.on("notes:delete", (note) => @deleteNote(note))
                Hub.vent.on("notes:new", => @showNote(new Note()))

您直接绑定(bind)到 Hub.vent，但从未明确解除与这些事件的绑定(bind)。因此，您的 UserDetails 列表实例将永远卡在内存中。

要解决此问题，您应该使用布局的 bindTo 方法，该方法将跟踪绑定(bind)并在调用布局的 close 方法时为您取消绑定(bind)。

            constructor: (@user) ->
                console.addHistory("DetailsLayout","INIT")
                super()
                @bindTo(Hub.vent, "notes:selected",(note) => @showNote(note))
                @bindTo(Hub.vent, "notes:show", => @showNotes())
                @bindTo(Hub.vent, "notes:save", (note) => @saveNote(note))
                @bindTo(Hub.vent, "notes:delete", (note) => @deleteNote(note))
                @bindTo(Hub.vent, "notes:new", => @showNote(new Note()))

当您不再需要布局时，请务必正确关闭它。在布局实例上调用 close 方法。这将正确清理构造函数设置的所有 bindTo 事件。

仅供引用 - Layout 直接从 ItemView 扩展，因此有关 ItemView 的所有信息/文档也适用于 Layout ，包括bindTo、close等的使用