0

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

bitsoflogic
  • 1,164
  • 2
  • 12
  • 28

2 Answers2

2

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!

Dory Zidon
  • 10,497
  • 2
  • 25
  • 39
  • This is great! I appreciate the course correction! The only problem appears to be the scripts not actually executing on the page o0 (using helpers w/ ember-cli 1.13.8) The hunt continues... – bitsoflogic Oct 16 '15 at 23:07
  • did you make sure to warp the script tag in a SafeString before you return the script tag? Or check out version 1.13.0 version I've added. you should use that. – Dory Zidon Oct 17 '15 at 10:21
  • Both do the same thing. I should've mentioned trying `htmlSafe` as well. They add the script tag, but it doesn't execute. Ember-cli took care of the helper syntax. Adding something like `

    It worked

    ` works however `` appears in the page source without writing the h3 tag.     – bitsoflogic Oct 17 '15 at 13:59
  • Looks like `document.write` won't work anyways: http://stackoverflow.com/q/24297829/456645. Still odd that the scripts won't execute from the helper, but it's looking like I'm going to need to find a way to fetch and parse the script contents in the Helper if I want to use these. – bitsoflogic Oct 17 '15 at 14:30
0

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

pfg
  • 213
  • 2
  • 7