Backbone / Dropzone : 如何正确处理 Dropzone 实例

Question

我的应用程序实例化了很多 dropzone 元素。通过导航，我实例化了 Dropzone，但是当用户离开到另一个页面时，我需要正确处理 Dropzones 以保持我的文档事件/DOM 干净。

我在 backbone / requirejs 应用程序中使用 amd 版本的 Dropzone。

文档说调用 disable() 方法来删除所有 dropzone 事件侦听器。我调用禁用方法，然后从 DOM 中删除该元素。这是正确清洁 Dropzone 的安全方法吗？ Dropzone 模块是否仍然保留对这个已删除的 Dropzone 元素的引用？

这是我用来在 backbone 应用程序中呈现 dropzone 元素 "as a view" 的代码。我需要使 "remove" 正常运行以清理 Dropzone 实例：

define(['backbone','dropzone-amd-module'], function(Backbone, Dropzone){
    // Prevent Dropzone from auto discovering this element:
    Dropzone.options.myAwesomeDropzone = false;
    // This is useful when you want to create the
    // Dropzone programmatically later
    // Disable auto discover for all elements:
    Dropzone.autoDiscover = false;

    return Backbone.View.extend({
        tagName: 'div',
        className: 'dropzone',
        dropzone_reference: null,
        render: function(){
            this.initDropzone();
            return this;
        },
        initDropzone: function(){
            // init dropzone (avoid to init more than once!)
            if( !this.dropzone_reference)this.dropzone_reference = new Dropzone(this.el, this.options);
        },
        remove: function(){
            // remove dropzone instance
            this.dropzone_reference.disable();
            Backbone.View.prototype.remove.apply(this, arguments);
        }

    });
}

Answer 1

骨干view.remove():

remove: function() {
  this._removeElement();
  this.stopListening();
  return this;
},

从 DOM 中删除视图的元素。

如您所说，drop 方法确实删除了事件处理程序：

If you do not need a dropzone anymore, just call .disable() on the object. This will remove all event listeners on the element

因为 view.remove() 从 DOM 中删除了元素本身，甚至 .disable() 似乎也没有必要。

唯一引用您的 dropzone 模块的是视图的 dropzone_reference 属性。当没有对视图的引用时，它将被垃圾回收，使 dropzone 模块没有引用，这将被垃圾回收。

只要确保您没有保留对已销毁视图的任何引用。

Backbone / Dropzone : 如何正确处理 Dropzone 实例

Backbone / Dropzone : How to properly dispose a Dropzone instance

javascript

backbone.js

dropzone.js