Как загрузить внешний JS-файл в компонент с помощью ember-cli

Я создал приложение ember с component, и я пытаюсь выяснить, как я могу загрузить внешний файл JS, который хранится в vendor dir приложения в компоненте. Код для компонента выглядит следующим образом:

// 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();
};
6
ember-cli ember.js

2 ответов

код 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.

вы можете узнать больше о том, как инициализировать компонент jQuery в [этом сообщении в блоге][1].

обновил ответ

узнав, что ваш bubbles.js файл не был плагином jQuery и что это была функция, которая работает в глобальном окне, вы можете назвать ее так:

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

export default Ember.Component.extend({

    didRender() {
        bubbles();
    }

});

если ваша функция является глобальной функцией, вам нужно будет добавить /* global bubbles */ в файл компонента или добавить bubbles до predef массив в .jshintrc файл, чтобы избежать ошибок JSHint.

5

это может быть глупый вопрос, но вы перезагрузите ваш ember serve после добавления импорта в ember-cli-build? Изменения в Brocfile или ember-cli-build не будет подобран до перезагрузки.

еще одна вещь, которую вы можете попробовать, это добавить { type: 'vendor'} к вашему заявлению импорта:app.import('vendor/bubbles.js', {type: 'vendor'});

2