2

一般问题 当尝试集成 DOM Manipulating 3rd Party 库时，可能会出现问题。在这种特殊情况下，一个 jQuery Lightbox 插件引起了问题。

原始问题 目前我正在尝试将以下 Lightboxplugin 集成到 Ember 视图中：http ://codecanyon.net/item/jquery-lightbox-evolution/115655

这是我当前的视图代码：

App.LightboxView = Ember.View.extend({
    templateName : 'whatever',
    isVisible : false,
    willInsertElement : function(){
        var that = this;
        $.lightbox(this.$(),{
            width   : 600,
            height  : 850,
            onOpen : function(){
                that.$().fadeIn(400);
                that.set("isVisible", true);
            },
        });
    },
});

这种方法工作得很好，因为它在将视图插入 DOM 的那一刻启动插件并且一切都显示得很好。Ember 似乎将 View 的结果 html 插入到 DOM 中，并且灯箱插件获取 DOM 元素并将其放置到灯箱工作所需的位置。但这就是问题的开始。在我看来，行动不再起作用。在我看来，我有一些 {{action}} 助手，但它们都不起作用（当我不使用灯箱时它们正在工作）。我认为这是因为插件对 DOM 进行了操作，但 Ember 希望成为唯一一个操作 DOM 的插件。

有人可以在这里提供一些指导吗？这是我第一次开发/使用灯箱，所以这可能会导致其他问题:-)

4

1 回答 1

1

这是我在 sly7_7 的帮助下找到的解决方案：

是什么导致了问题？ 正如我的问题中所述，我编写了一个新视图，该视图应该在灯箱插件的帮助下显示为灯箱。这意味着由 EmberJS 插入的 DOMElement 帽子将被插件移动到 DOM 内部。问题是我的应用程序是这样声明的：

App = Ember.Application.create({
    rootElement : "#ember-application-root",
});

相应的 HTML 是：

<html>
   <body>
     <div id="ember-application-root" />
   </body>
</html>

应用程序的根只是指 DOM 的一部分。Lightbox 插件在 DOM 的末尾插入了它的内容，这意味着Ember 视图被拉到了 Ember 应用程序的 div 之外，因此失去了它的事件监听器。

解决方案： 使 body 元素成为 Ember 应用程序的根。正如 sly7_7 在他的评论中概述的那样，这是 Ember 应用程序的默认情况。

App = Ember.Application.create({
    // rootElement : "#ember-application-root", - defaults to body now
});
于 2013-01-13T16:21:37.113 回答