How to inject 3rd party javascript in Ember.js template?

Question

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!?

Answer 1

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!

Answer 2

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