search

voidlabs / mosaico

Mosaico - Responsive Email Template Editor
https://mosaico.io
GNU General Public License v3.0
1.71k stars 504 forks source link

Appending ko template: main to another element #213

Closed ThomasSauques closed 8 years ago

ThomasSauques commented 8 years ago

Hi,

I'm currently building a website around mosaico, and I'm running in some issues. The website is based on Angularjs, so I need mosaico to stay inside the ng-view div (otherwise there's leftover dom elements all over the place when I change route).

So far I've been partially successful, I've modified the following lines:

$("").appendTo( global.document.body ); to $("").appendTo( $('.mosaico-container') );

and

performanceAwareCaller('unapplyBindings', ko.cleanNode.bind(this, global.document.body )); to performanceAwareCaller('unapplyBindings', ko.cleanNode.bind(this, $('.mosaico-container') ));

And it seems to do the job when I load the route for the first time, Mosaico is entirely loaded inside my mosaico-container div. However if I change route and comeback to the editor route again I get that error:

"Error: You cannot apply bindings multiple times to the same element. at Error (native) at m (http://loftymail.localhost.fr/dist/vendor/knockout.js:70:330) at k (http://loftymail.localhost.fr/dist/vendor/knockout.js:69:387) at a.Rb (http://loftymail.localhost.fr/dist/vendor/knockout.js:75:413) at _call (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12757:16) at _timedCall (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12766:15) at Object.viewModel (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12356:25) at pluginsCall (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12331:50) at templateCompiler (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12604:13) at Object.success (http://loftymail.localhost.fr/dist/mosaico.js?v=0.15:12458:27)"

From what I've gathered it seems a node isn't cleaned up properly and it conflicts. However I have absolutely 0 knowledge of Knockout.js and I couldn't find how to solve it, so I was wondering if you could point me in the right direction as to where I should be looking to fix this issue.

Thank you for your time.

bago commented 8 years ago

Please note that i never tried to dispose mosaico and start it again.. so I don't know if this can be really done without altering mosaico core and fixing a lot of stuff.

At this time "dispose" code is not called at all.. so first of all you have to make sure disposing "happens".

"templateCompiler" returns an object with access to the "dispose" method, so you have to change things so you get access to that method and so you can really dispose before you init it again.

Also, maybe this is not enough, because I implemented some dispose logic but I never used/needed it, so the dispose implementation may be incomplete/partial/buggy.

Mosaico library is "developed" as a SPA "alone" so I'm not sure trying to integrate it with angular is a "good idea" (why don't you put mosaico in its own frame, instead?)

ThomasSauques commented 8 years ago

So, I tried the dispose method for a bit, but it didn't really gave me any results, but maybe I was using it wrong.

Anyway, I went for the "own frame" plan, I'm loading mosaico in a separate document and loading it inside an iframe. Not sure if that's the most elegant solution, but at least it's effective and I don't have any error messages anymore.

Thanks again for your time and for the tip !