Issues with sourcing librares

Ember CLI
1

I am using ember-cli 1.13.8 and using ember2.0.0.

I am getting an issue ember-cli-build. I have imported libraries: app.import(‘bower_components/d3/d3.js’); app.import(‘bower_components/nvd3/build/nv.d3.js’); app.import(‘bower_components/nvd3/build/nv.d3.css’); app.import(‘bower_components/masonry/masonry.js’);

And in index.html I am sourcing “assets/vendor.js”, I also have verified after build and see the js libraries concatenated in vendor.js.

However when I actually try to use masonry or nvd3 i get nv is not defined or $(…).masonry is not a function. I found a work around for nvd3 where I can use broccoli-funnel and funnel those libraries but I have to individually source those files in index.html. This doesnt work with masonry though, i still get $(…).masonry is not a function

Anyone encounter this issue?

Posting some code:

index.html:

{{content-for ‘body’}}

<script src="assets/vendor.js"></script>
<script src="assets/bower/jquery/dist/jquery.js"></script>
<script src="assets/bower/masonry/masonry.js"></script>
<script src="assets/bower/d3/d3.js"></script>
<script src="assets/bower/nvd3/build/nv.d3.js"></script>
<script src="assets/demo.js"></script>

component/chart-loader.js:

export default Ember.Component.extend({

didInsertElement: function(){
    $('.grid').masonry({         //the masonry not defined throws on this line
        itemSelector: '.grid-item'
    });
}

});

EDIT: Realized using masonry.pkgd.js works instead of masonry.js, however I still have to individually funnel in that file and doing app.import on it does not work. To my knowledge using app.import concatenates the library to vendor.js and source that file in index.html puts it in global space. Please correct me if I am wrong.

2

In my current project I’m not using masonry but am using d3. As a test, I installed masonry with bower and referenced it in one of my components, adding an empty div in its template.

didInsertElement: function() {
  this.$("#foo").masonry({itemSelector : '.foobar', columnWidth : 200});

No complaints. It doesn’t actually do anything but that’s expected. I did have to use “this.$” rather than just “$”.

My ember-cli-build.js:

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

  app.import('bower_components/d3/d3.js');
  app.import('bower_components/d3-tip/index.js');
  app.import('bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js');
  
  app.import('bower_components/masonry/dist/masonry.pkgd.js');

  return app.toTree();
};

Did you include “dist” in the path?

This is with ember-cli 1.13.1, and bower.json has: “masonry”: “~3.3.2” fwiw.