1

I'm trying to use elycharts in a Spine.js app. Elycharts monkey-patches jQuery to add $('...').chart(...). Unfortunately, I'm just getting an error saying $ doesn't have function "chart".

As this is my first Spine.js app I generated it using spine.app. This uses jQuery as an NPM module. Elycharts is not CommonJS friendly and therefore must be included in the "libs" section of slug.json. According to the Spine docs (see slug.json in the Hem documentation), any files in "libs" get loaded before anything in "dependencies". So I'm pretty sure the problem is elycharts is loading before jQuery, trying to do its monkey-patch, but since $ isn't defined yet it fails silently.

Has anyone seen issues similar to this, using "libs" that depend on libraries already included via NPM? Is there a way to more finely control the load order in spine.js beyond libs -> dependencies?

Joe Fiorini
  • 641
  • 5
  • 15

2 Answers2

0

For me the "not so nice" solution was this:

<script type="text/javascript">
    var jQuery  = require("jqueryify");
    var exports = this;
    jQuery(function(jQuery){
// load jquery dependant libraries                  
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/waypoints/1.1.6/waypoints.min.js", function() {
        var App = require("index");
        exports.app = new App({el: $("#wrapper")});      
    });
</script>

So the trick is to load the jquery dependant libraries before the app is initialized. Hope it helps someone.

andresv
  • 351
  • 4
  • 6
0

I've been looking for a solution to include Twitter Bootstrap (also depends on jQuery) into spine.js application (generated with spine script). The best I've found is this: simply replace jqueryify with jquery.js!

Drop these lines:

./app/lib/setup.coffee:3:require('jqueryify')
./package.json:9:    "jqueryify": "~0.0.1",
./public/index.html:9:    var jQuery  = require("jqueryify");
./slug.json:5:    "jqueryify",

Then put jquery.js and your javascript library into app/lib and add them to slug.json libs array:

"libs": [
  "app/lib/jquery.js",
  "app/lib/jquery-dependent-3rd-party-lib.js"
]

And voilà!

P.S. as for Twitter Bootstrap, I recommend putting whole bootstrap directory into public directory (because it's also shipped with CSS and images) and reference it from slug.json accordingly:

"libs": [
  "app/lib/jquery.js",
  "public/bootstrap/js/bootstrap.min.js"
]

That way updating Twitter Bootstrap library will be trivial — no need to scatter files all over the place.

ljank
  • 90
  • 8