I’m not done with the book yet, but the first caveat I see is Ember does not seem to have a
noConflict version, where you could namespace Ember in something other than
Ember is already defined in the page, then including the widget will cause problems.
Is anyone creating / has anyone created Disqus-style widgets using Ember? What tips do you have?
This is pretty old at this point, but I would recommend ember-cli and configuring
config/environment.js as a starting point.
I think this should be sufficient to avoid conflicts (sort of the point of ES6 use in ember-cli), but I’m not that knowledgeable about it.
Having said that, I haven’t gotten very far in my own third party widget project yet. Will post back here if I have anything more to share about it.
I’ve had some, non-ideal, success with a proof-of-concept widget using Ember as developed and built with ember-cli.
Basically it boiled down to two things. I had to use an iframe to add it to the target page and specifying a
config/environment.js that matched where I was hosting it.
Here are the steps I used on the app after it was developed:
- edit value of
config/environment.js to be the path to your target directory where it will be hosted
ember build --environment production --output-path your_target_dir
cp -r your_target_dir path/to/hosted/dir/parent/
<iframe src="http://your_host/your_target_dir/"… iframe tag to target HTML page
Yeah, pretty simple and what you would expect.
However, I had hoped to avoid using an iframe for the Ember app for a couple reasons:
- would be great if the widget could inherit styles
- secondary interactions within the Ember app would have better UX with a modal on the parent window
When I tried to just change
rootElement and use some wrapping JS to include the necessary vendor and app css and js files, I couldn’t get it to work. I’ll start a separate topic on that.
This is great. Thanks Walter. I haven't read everything yet but this will be useful to me and others.
I’ve now got a jQuery based loader script that successfully adds a ember-cli based application to the calling window. I.e. a third party widget not wrapped in an iframe.
config/environment.js, I change
none and take out
ENV.baseURL as it will be unneeded. See Location - 4.6 - Ember API Documentation for backtground (thx @abuiles).
Then I use jQuery to do the following:
- add the CSS files I need to head if not already present (needs to match exact file names from built ember-cli app as copied into place)
- add container div to DOM (should match
- add meta tag to head for app configuration (should be based on what you have in the head of
index.html in your build)
- add the JS files (vender and your_app, exact file names as with CSS) to DOM after container div
The remaining problem I have is I need to be able instantiate multiple instances of the ember-cli app under different containing divs.
My jQuery loader script can handle tracking of instances and adding the container divs, etc, but I’m not sure how to spin up a different instance of the app from the default. This is what I’ll ask about in a new topic.
Here’s a gist with the interesting bits of the proof of concept.