Unable to load jquery plugins in Ember

Question

First of all: I already tried this answer: Using jquery in Ember-cli which seems to be the canonical way of adding a jQuery plugin to ember.

I was following this tutorial: http://beerlington.com/blog/2015/01/22/jquery-inputmask-user-experience-in-emberjs/

I installed the plugins using bower, and then added the imports to Brocfile.js.

Here's my Brocfile.js:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  compassOptions: {
    outputStyle: 'expanded'
  }
});

app.import('bower_components/ember-uploader/dist/ember-uploader.js');
app.import('bower_components/moment/moment.js');
app.import('bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.min.js');

module.exports = app.toTree();

The components are all correctly located at their import paths thanks to bower.

And here's the component at components/input-mask.js:

import Ember from 'ember';

export default Ember.TextField.extend({
  initializeMask: function() {
    var mask = this.get('mask');

    this.$().inputmask(mask, {
      onBeforeMask: function(value) {
        if (mask === 'mm/dd/yyyy') {
          return moment(new Date(value)).format('L');
        }
      }
    });

    // The input mask changes the value of the input from the original to a
    // formatted version. We need to manually send that change back to the
    // controller.
    this.set('value', this.$().val());
  }.on('didInsertElement')
});

But in Chrome's console I get the error: Uncaught TypeError: undefined is not a function for this.$().inputmask.

Am I missing something else to import a plugin to jQuery?

@Bloomfield I'm using Ember CLI to serve the app, I always thought it used the brocfile on its own. How should I rerun the broc file? — jrlainfiesta, Mar 05 '15 at 22:15
@jrlainfiesta Yeah it the ember serve command runs broccoli, but if you import new files into the broc file, you have to rerun the ember serve command so the files get uploaded. — Tyler Iguchi, Mar 05 '15 at 22:28
Oh I see, rerunning `ember serve` doesn't work either. The plugin still appears as undefined. — jrlainfiesta, Mar 05 '15 at 22:59

score 0 · Answer 1 · answered Mar 06 '15 at 15:12

0

The problem was solved after I restarted my computer and issued ember serve again. I guess my computer was doing something weird caching where it shouldn't have.

answered Mar 06 '15 at 15:12

jrlainfiesta

105
1
2
9

2

After adding the file paths to your Brocfile.js, did you close the ember server, the start again? You need to do that every time you alter that file so the changes are picked up. – ToddSmithSalter Mar 06 '15 at 23:25

Unable to load jquery plugins in Ember

1 Answers1