Ember.js-在某些模板中加载其他.js文件

Question

Im developing a ember.js based app. On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script> . But since handlebar-templates are defined by <script> -Tags itself, its not possible to simply put my dependencies within a template directly.

How can I include js-files on some individual sites only?

Answer 1

Including files in an Ember.js application is a bit more complex than in a regular website.

If you do not use ember-cli , then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html . You can bundle JavaScript files using tools such as grunt or brunch or broccoli .

Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here ). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)

Good luck!

Answer 2

Ok I found an possibility to solve that problem:

Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt .

That works for me. Also, as kpdecker says here , it is better to use precompiled templates than defining them inline.

Answer 3

You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.