Writing a LightboxView causes problems / Integrating DOM Manipulating jQuery-Plugins makes actions unusable

问题

General Problem Problems can arise, when one trys to integrate DOM Manipulating 3rd Party libraries. In this particular case, a jQuery Lightbox plugin caused problems.

Original Question Currently i am trying to integrate the following Lightboxplugin into an Ember View: http://codecanyon.net/item/jquery-lightbox-evolution/115655

This is my current code for the View:

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);
            },
        });
    },
});

This approach is working quite fine as it is starting the plugin in the moment the View is inserted into the DOM and everything is displayed fine. Ember seems to insert the resulting html of the View into the DOM and the lightbox plugin fetches the DOM Element and places it into the place where it is needed for the lightbox to work. But this is where the problems start. Actions do not work anymore in my view. I have some {{action}} helpers in my view and none of them works (they are working when i don't use the lightbox). I assume this is because the plugin makes manipulations to the DOM, but Ember wants to be the only one to manipulate the DOM.

Can anyone offer some guidance here? This is the first time i am developing/utilizing a lightbox, so this could cause additional problems :-)

回答1:

This is the solution i found with help of sly7_7:

What caused the problem? As outlined in my question i wrote a new View that should get displayed as a Lightbox with the the help opf a Lightbox plugin. That meant the DOMElement hat was inserted by EmberJS would be moved inside of the DOM by the plugin. The problem was that my Application was declared this way:

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

And the corresponding HTML was:

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

The root of the application just referred to a part of the DOM. The Lightbox plugin inserted its content at the end of the DOM, which meant that the Ember View was pulled outside of div for the Ember App and therefore lost its event listeners.

The solution: Make the body element the root of the Ember Application. As sly7_7 outlined in his comment, this is the default case for the Ember Application.

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

来源：https://stackoverflow.com/questions/14266771/writing-a-lightboxview-causes-problems-integrating-dom-manipulating-jquery-plu

标签

ember.js

lightbox