Ember.js在特定页面上包含外部脚本

Question

我正在试图弄清楚如何包含外部JavaScript源(图表),但仅限于网站上的单个页面.可以在视图或模板中完成吗？

我发现只是添加<script src="exhibit.js"></script>到页面模板不起作用.如果我将它添加到整个站点的模板,它加载就好了,但是它会加载到每个页面上.

我问题的另一面可能更具体.有没有办法在每次加载页面时获取脚本？示例:当我第一次访问包含展示脚本的页面时,它会加载包含展览的ember应用程序并正确显示页面.我离开页面,当我返回到页面时,展览脚本没有被重新加载,因此不能像第一次访问时那样正确地重新绘制页面.

Answer 1

如果您使用Ember CLI构建应用程序并且exhibit.js文件非常小,那么最好exhibit.js将vendor.js文件包括在文件中以最小化HTTP请求.

但是,如果要exhibit.js在单个路径中加载,可以使用此答案中描述的polyfill方法,如下所示:

// app/controllers/some-route-name.js    

import Ember from 'ember';

export default Ember.Controller.extend({

  loadPlugin: function() {
    // Use run loop if you need to setup the DOM first
    Ember.run.scheduleOnce('afterRender', this, function() {
      Ember.$.getScript('path/to/exhibit.js');
    });
  }.on('init')

});

这将异步加载文件.该getScript加入文档是在这里 -你会看到,你可以使用回调了.

如果在加载之前不需要DOM设置,则可以删除运行循环.在控制器的init事件上加载此脚本将阻止每次用户导航到路径时重新加载.如果您确实希望每次都加载脚本,那么您可以移动getScript到视图的didInsertElement事件.