iCheck.js in Meteor 0.9.1.1

Question

I've implemented iCheck in Meteor 0.9.1.1 in the following way:

icheck.js and Meteor app

But Firebug tells me, that .iCheck is not a function.

I've just added jQuery with

Meteor add jquery

so I think I have the newest version of it, which should provide .iCheck. Or does it use an older version of jQuery?

Answer 1

This is how I got it working :

1. Download and uncompress iCheck-master from the github repository.
2. Copy icheck.js to client/lib/
3. Copy the css of the theme you want in client/config/ (example : skins/flat/red.css)
4. Copy the images of the theme you want in public/img/icheck/ (example : skins/flat/red.png, skins/flat/[email protected])
5. Edit the css to reference properly the images (example : replace red.png with /img/icheck/red.png

Once this is done you can now use iCheck in your app like this :

client/views/icheck-test/icheck-test.html

<template name="icheck_test">
  <label>
    <input type="checkbox" name="foo">
    Foo
  </label>
</template>

client/views/icheck-test/icheck-test.js

Template.icheck_test.rendered=function(){
  this.$("input").iCheck({
    checkboxClass: "icheckbox_flat-red",
    radioClass: "iradio_flat-red"
  });
};

This process can be repeated for integrating nearly any jQuery plugin in Meteor. We could also use a package but at the moment customizing the package to pick a specific theme is a bit tricky.