如何在 Backbone 视图中测试 el 是否附加到 DOM？答案

【问题标题】：How to test if el is attached to the DOM in a Backbone view?如何在 Backbone 视图中测试 el 是否附加到 DOM？
【发布时间】：2012-10-18 21:33:01
【问题描述】：

我需要知道 View 中的 el 是否已附加到 DOM，因为我正在尝试应用 jQuery 插件，但该插件要求 el 首先在 DOM 中。

render : function() {
    ...
    if (this.$el.closest('html').length)    // test if in DOM
        this.$el.someJqueryPlugin();
    return this;
}

我还需要此视图的所有者在将 el 插入 DOM 后立即触发“onshow”，这是可行的，但有点笨拙。

我能想到的另一个解决方案是这样做：

var el = $('<div>').appendTo(somewhereInsideDOM);
var view = new view(el:el);

在这种情况下，el 将始终附加到 DOM 上，这样就不会那么笨拙了，但缺点是操纵 el 意味着操纵 DOM。最后，使用这种方法，this.className 不受尊重。需要额外的.addClass(this.className)。

还有其他解决方案吗？

【问题讨论】：

您希望在el 附加到 DOM 时收到通知？
当然，如果存在这样的事情。 this.$el.closest('html').length 有效，但似乎有点老套。如果有更好的，请告诉我们。我的同事使用了.livequery()，但我觉得使用它不太合适。我现在正在使用我的第二个解决方案，其中el 始终在 DOM 中
closest('html') 如果您想知道它现在是否在其中，它就可以工作，但它不会告诉您以后是否有人将el 添加到 DOM 中。 livequery 也很笨拙。您也许可以指定人们必须将el 添加到DOM 作为调用render 的一部分，然后使用setTimeout(..., 0) hack。 onshow到底需要做什么？
最近有人问过类似的问题：stackoverflow.com/questions/12785861/…

【解决方案1】：

如果元素需要在 DOM 中，最好将其附加到 body，例如

var el = $('<div />').css({ display: 'none' }),
    view;

$(body).append(el);
view = new View({ el: el });
el.somejQueryPlugin().show();

希望这会有所帮助。

【讨论】：