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

Question

我正在尝试了解如何包含外部 javascript 来源（展示），但仅限于网站上的单个页面。可以在视图或模板中完成吗？

我发现简单地将 <script src="exhibit.js"></script> 添加到页面模板是行不通的。如果我将它添加到整个网站的模板中，它会加载得很好，但是它会加载到每个页面上。

我的问题的另一面可能更具体。有没有办法在每次加载页面时都获取脚本？示例：当我第一次访问包含 exhibit 脚本的页面时，它会加载包含 exhibit 的 ember 应用程序，并且页面会正确显示。我离开页面，当我 return 到页面时，展示脚本没有重新加载，因此没有像第一次访问时那样正确地重绘页面。

Answer 1

如果您使用 Ember CLI 构建您的应用程序并且 exhibit.js 是一个相当小的文件，您最好在 vendor.js 文件中包含 exhibit.js最小化 HTTP 请求。

但是，如果您想在单个路由中加载 exhibit.js，您可以使用 this answer 中描述的 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 docs are here - 你会发现你也可以使用回调。

如果加载前不需要DOM设置，可以删除运行循环。在控制器的 init 事件上加载此脚本将防止它在用户每次导航到路线时重新加载。如果您想要每次都加载脚本，您可以将 getScript 移动到视图的 didInsertElement 事件。

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

Ember.js include external script on specific page

javascript

ember.js