主干/ Dropzone :如何正确地处理Dropzone实例

Question

我的应用程序实例化了许多下拉区域元素。通过导航，我实例化了Dropzone，但是当用户离开另一个页面时，我需要正确地配置Dropzone，以保持文档事件/ DOM的干净。

我在主干/需求应用程序中使用Dropzone的amd版本。

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

下面是我用来在我的主干应用程序中呈现一个“作为视图”的下拉区域元素的代码。我需要使“删除”函数正确地清除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方法确实删除了事件处理程序：

如果不再需要下拉区域，只需在对象上调用.disable()即可。这将删除元素上的所有事件侦听器。

因为view.remove()将元素本身从DOM中删除，所以即使是.disable()似乎也没有必要。

唯一能引用您的下拉区域模块的是视图的dropzone_reference属性。当没有对视图的引用时，它将被垃圾收集，留下没有引用的下拉区域模块，这反过来就会得到垃圾收集。

只需确保不保留对已销毁视图的任何引用。