Reputation: 1224
I'm trying to utilize two 3rd party widgets on a website however cannot quite figure out how to get Ember.js to cooperate. I found lots on Views and have found that they're deprecated now and Components seem the way to go however I'm not sure how to make this work...
I have various city-based templates that require:
<script type="text/javascript" src="http://www.topix.net/iframe/city/atco-nj?js=1"></script>
and one other that looks like this:
<script>document.write('<script src="... + Math.random() + ..."></script>');</script>
How would I do this with Components or a better alternative!?
Upvotes: 0
Views: 2178
Reputation: 213
I got this to work by making a component. I had the same sort of problem, I wanted to draw some pie charts at load time of the page using charts.js
SO i defined the charts and ran the js to create them in a component.
heres the component 'js-charts':
export default Ember.Component.extend({
didInsertElement: function() { insert script and or methods to run }
});
This will always trigger because of the didInsertElement.
and in the template of the page your rendering just add {{js-charts}} component
Upvotes: 0
Reputation: 10719
For this you don't really need a component, you could just create a template and inject it wherever you need it. However I'm not 100% what are city based templates but just to output html you can just use a template template / helper:
using a template (known as partial): run (if using ember cli , if not just create the template file somewhere, again assuming you have some way you're compiling templates on the server)..
ember g partial inject_city
then:
//inject_city.hbs
<script type="text/javascript" src="http://www.topix.net/iframe/city/atco-nj?js=1"></script>
then in your main template: {{partial 'inject_city'}}
Further reading: http://guides.emberjs.com/v1.10.0/templates/writing-helpers/
using a helper (notice to return html you must use the safestring)
Ember.Handlebars.helper('injectScript', function(value, options) {
return new Ember.Handlebars.SafeString("<script>document.write('<script src="... + Math.random() + ..."></script>');</script> );
});
In version 1.13.0 and above the syntax is different:
import Ember from "ember";
export default Ember.Helper.helper(function(params) {
return Ember.String.htmlSafe(`<b>${params[0]}</b>`);
});
(Notice you should generate a helper, wrap it with Helper.helper and return Ember.String.htmlSafe).
further reading: http://guides.emberjs.com/v1.10.0/templates/writing-helpers/
However the best way is to include libraries in your ember build / build your own component from by using the building blocks, and not just include a whole script..The ember documentation explains about components pretty well and ember-cli docs explain how to include third party libs.. Best of luck!
Upvotes: 2