ember.js - 如何使用 ember-cli 在组件中加载外部 JS 文件

Question

我创建了一个带有 component 的 ember 应用程序，我想弄清楚如何加载存储在 vendor 中的外部 JS 文件。组件内应用程序的目录。该组件的代码如下所示，

// app/components/bubbles-page.js

import Ember from 'ember';

export default Ember.Component.extend({

    didInsertElement: function() {
    // this.$() is a scoped selector to the current view

    // bubbles();



    // window.onload = bubbles();

    // the below line gives the following error,
    this.$().bubbles();
    // ERROR
    //TypeError: this.$(...).bubbles is not a function
    // END ERROR
  }

});

和 ember-cli-build.js看起来像下面这样，

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here

    // 
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.
  app.import( app.bowerDirectory + '/d3/d3.min.js');
  app.import('vendor/bubbles.js');

  return app.toTree();
};

Answer 1

您的 ember-cli-build.js看起来还可以。

至于你的组件文件，你可以使用 Ember.run.scheduleOnce('afterRender', callback)等待 DOM 呈现，然后调用您的 jQuery 插件。

此外，通常使用 jQuery 插件，您必须传递一个 jQuery 选择器来调用该函数。

请尝试以下操作:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        this.$('.my-bubbles-container').bubbles();
    }

});

替换 .my-bubbles-container使用您的 jQuery 选择器。我不熟悉您尝试使用的 jQuery 插件，但通常这就是 jQuery 插件的使用方式。

您可以在 [这篇博文][1] 上阅读有关如何初始化 jQuery 组件的更多信息。

更新答案

得知您的 bubbles.js后file 不是一个 jQuery 插件，它是一个在全局窗口上操作的函数，你可以这样调用它:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        bubbles();
    }

});

如果您的函数是全局函数，则需要添加 /* global bubbles */到您的组件文件，或添加 bubbles到 predef .jshintrc 中的数组文件以避免 JSHint 错误。