Search code examples
javascriptember.jsbowerember-clijstorage

How can I use jStorage (or other external JS libs) with Ember.js via Ember-CLI


I had a small Ember-App in just one single HTML File and everything was working fine, but since it was getting quite big I started to port it to Ember-CLI. Most things worked fine to port but I'm still struggling to add JStorage:

https://github.com/andris9/jStorage

I'm not really sure how to start as its a plain JS Lib, that I normally would just drop into the code somewhere before I use it. Now with all the modules I'm totally lost where to even start looking for how to do it.

Can anyone point me in the right direction how to use such JS Libs?

I found a few Topics around it but did not get to any working path.

Here is how I used it previously:

App.Something = Ember.Object.extend({
  init: function() {
    var stored = $.jStorage.get('something');
    ...
  }
});

Solution

  • Well, after a lot of smoke out of my ears i got it to work:

    1. add json2

      $ bower install --save json2

      This does not work out of box because there is no tags in the repo. Edit the bower.js File to set the version to "master". Then it works.

    2. add jStorage

      $ bower install --save jstorage

    3. Install the dependencies (not sure if necessary but i did it)

      $ ember install:bower

      Then the files are available in the folder bower_components, which is ignored by git and apparently my editor (atom.io) too.

    4. Import the files in the Brockfile.js like this

      ... app.import('bower_components/json2/json2.js'); app.import('bower_components/jstorage/jstorage.js'); module.exports = app.toTree();

    5. Use it, prefixing $ with Ember not to upset JSHint (would work without)

      ... var stored = Ember.$.jStorage.get(id); ...