为什么在更换HTML不起作用骨干事件？ [英] Why Backbone events on replacing html does not work?

问题描述

如果我存储视图 window.myView 变量，渲染它，然后在JavaScript控制台呼叫：

  $（'＃集装箱'）。HTML（''）
 

然后调用：

  $（'＃集装箱'）。HTML（window.myView。$ EL）
 

绑定事件将停止工作。

我是pretty肯定应该是这样，但：

• 到底为什么是这样工作的？


• 如何重新渲染视图分部W / O丢失事件绑定？


• 为什么叫 myView.render（）不会丢失事件绑定？

---

更新：

一文。那是什么原因呢？

  

确认jQuery是没有卸载你的事件，当你不希望它

  
  

如果您正在构建在其中创建动态视图和安装/删除他们到DOM的应用程序，你可能有问题。每次你从DOM中删除一个视图，jQuery的卸载所有事件。所以你不能有一个视图的引用，并从DOM中删除它，然后再重新连接它。您的所有事件将被卸载。如果你想保持周围的意见，更好的主意是使用显示隐藏它们：无。但是，你不应该滥用这种和回收，你是不是打算使用一段时间视图（prevent内存泄漏）。

解决方案

jQuery的空， HTML 和删除事件正在清理所有的jQuery的事件和数据绑定到prevent内存泄漏（你可以检查jQuery的源$ C ​​$ C为 cleanData 办法找出更多 - 这是一个无证法）

view.render（），因为骨干鉴于事件是使用事件委托约束，并绑定到视图的报<不删除事件/ code>而不是直接在视图中的元素。

如果你想重用你的意见，你可以使用jQuery 分离的方法是让所有的事件和数据绑定，虽然你要小心不生产的内存中删除泄漏这种方式。 （ jQuery的分离文档）

如果你想要去的，你总是可以很容易地重新绑定使用Backbone.View delegateEvents 法的骨干事件第一种方式。 （骨干DOC ）

PS。它也更清洁和更优化的使用jQuery .empty（）而不是的.html（''）如jQuery的HTML方法总是调用空先清理所有事件和数据首先它插入新的HTML之前。不清理jQuery的事件，也从来不混合jQuery和本地DOM的innerHTML，因为它可能会产生内存泄漏的原因/数据

If I store view in window.myView variable, render it, then call in javascript console:

$('#container').html('')

and then call:

$('#container').html(window.myView.$el)

Bound events will stop working.

I'm pretty sure that is supposed to be so, but:

• why exactly it works this way?
• how to re-render subpart of view w/o losing event bindings?
• why calling myView.render() won't lose event bindings?

---

Update:

Found this article. Is that the reason?

Make sure jQuery isn’t unloading your events when you don’t want it to

If you are building an app where you create views on the fly and attach/remove them to the dom, you may have a problem. Everytime you remove a view from the dom, jQuery unloads all the events. So you can’t have a reference to a view and remove it from the dom and then re-attach it later. All your events would have been unloaded. If you wanna keep the views around, a better idea is to hide them using display:none. However, you should not abuse this and recycle views that you are not going to use for a while (and prevent memory leaks).

解决方案

jQuery empty, html and remove events are cleaning up all the jquery event and data bindings to prevent memory leaks (you can check jQuery source code for cleanData method to figure out more - it's an undocumented method)

view.render() doesn't remove the events because Backbone view events are bound using event delegation and are bound to the view's el rather then directly to the elements in the view.

If you want to reuse your views you can remove them using the jQuery detach method which keeps all the events and data bound though you have to watch out not to produce memory leaks this way. (jquery detach docs)

If you want to go the first way you can always rebind the Backbone events easily using the Backbone.View delegateEvents method. (backbone doc)

ps. it's also cleaner and more optimal to use jQuery .empty() rather then .html('') as jQuery html method always calls empty first to clean up all the events and data first before it inserts new html. Also never mix jquery and native DOM innerHTML as it might produce memory leaks cause of not cleaned up jQuery events/data

这篇关于为什么在更换HTML不起作用骨干事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！