BackboneJS + Require JS + Wookmark.js plugin not working

Question

I have a Backbone App bound together with RequireJS. Now I want to use the Wookmark plugin https://github.com/GBKS/Wookmark-jQuery but for some reason I cant get it running. So I did the following:

My config.js:

require.config({    

   deps: ['main'],

   paths: {
    jquery          : '../lib/jquery-2.1.0.min',
    underscore      : '../lib/lodash-2.4.1',
    backbone        : '../lib/backbone',
    layoutmanager   : '../lib/backbone.layoutmanager',
    handlebars      : '../lib/handlebars/handlebars-v1.3.0',
    imagesLoaded    : '../lib/jquery.imagesloaded',
    wookmark        : '../lib/wookmark.min'
  },

 shim: {
   backbone  : {
    deps   : ['jquery', 'underscore'],
    exports: 'Backbone'
  },
  handlebars: {
    exports: 'Handlebars'
  },
  layoutmanager: ['backbone']
}

});

Then in my App.js I have:

define([
'jquery',
'underscore',
'backbone',
'wookmark',
'imagesLoaded',
'layoutmanager',
'handlebars'
],

function ($, _, Backbone, wookmark, imagesLoaded) {
    // some code...

    $(function() {
        var tiles = $('#suptiles'),
                handler = $('li', $tiles),
                options = {
                    autoResize: true,
                    container: $('#supmain'),
                    offset: 10,
                    outerOffset: 15,
                    fillEmptySpace: true,
                    itemWidth: 280,
                    flexibleWidth: 500
                };

        $tiles.imagesLoaded(function() {
            $handler.wookmark(options);
        });
    });     

});

Then in my HTML file I did:

<div id="supmain">
  <ul id="suptiles">
   <li>some image</li>
   <li>some image</li>
   <li>some image</li>
   <li>some image</li>
  </ul>
</div>

I cna see in my console that both the wookmark and imagesloaded-plugins are loaded, buut it doesnt get triggered. Does anyone know what might be the issue here?

Thanks in advance....

Answer 1

I solved it myself by simply keeping the wookmark-plugin settings in RequireJS and by placing it in an afterRender function in the relevant View:

afterRender: function(){
    $('#suptiles li').wookmark({
       autoResize: true,
       container: $('#supmain'),
       offset: 10,
       outerOffset: 15,
       fillEmptySpace: true,
       itemWidth: 280,
       flexibleWidth: 500
   });
},

Thanks for the many responses though!

Answer 2

You’re calling $tiles.imagesLoaded but $tiles isn’t defined, nor is the $handler you use later. Try this:

$(function() {
    var tiles = $('#suptiles'),
            handler = $('li'),
            options = {
                autoResize: true,
                container: $('#supmain'),
                offset: 10,
                outerOffset: 15,
                fillEmptySpace: true,
                itemWidth: 280,
                flexibleWidth: 500
            };

    tiles.imagesLoaded(function() {
        handler.wookmark(options);
    });
});     

The $ is part of the variable name just like any other allowable character: $tiles and tiles refer to different variables.

Also, the Wookmark jQuery plugin documentation says this about the container option:

the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".

This updated fiddle seems to be working. I added the necessary CSS and removed the , tiles part of the handler declaration (what was that for?).