How to use md5.js within a compontent?

Question

I just started working with Ember-CLI 0.0.36 and I'm stuck with the Gravatar example code from the Ember.js homepage.

I did

> bower install --save JavaScript-MD5
> ember generate component gravatar-image

Brocfile.js

[...]
app.import('vendor/JavaScript-MD5/js/md5.js');
[...]

app/components/gravatar-image.js

import Ember from 'ember';

export default Ember.Component.extend({
  size: 200,
  email: '',

  gravatarUrl: function() {
    var email = this.get('email'),
        size = this.get('size');

    return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
  }.property('email', 'size')
});

After starting ember server I'll get the following error message:

xyz/components/gravatar-image.js: line 11, col 48, 'md5' is not defined.
1 error

How can I tell the component to use JavaScript-MD5?

Answer 1

JavaScript-MD5 does't export any AMD-Modules, if I see it right. But it defines window.md5. So your app.import will include it in vendor.js and you can call window.md5 in the component.

Answer 2

To get this to work I used:

bower install blueimp-md5 --save-dev

and added import in Brocfile.js

app.import('bower_components/blueimp-md5/js/md5.js');

then add "md5" to predef array as mentioned by Oliver to suppress md5 warning.

Answer 3

That's just a jshint linter message.

Open your .jshintrc file, add "md5" to the "predef" object and you are fine.

Answer 4

You might need to install the ember-cli-md5 package. This will install all the required dependencies in your node modules. Use this npm install --save-dev ember-cli-md5 to install ember-cli-md5.

Once installed you will need to generate md-5 which will install the browser package via bower. Use this to generate md-5 ember generate md-5.

So, you need to perform following two steps:-

npm install --save-dev ember-cli-md5
ember generate md-5