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....

Buck Doyle · Accepted Answer · 2014-05-12 20:40:57Z

1

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?).

edited May 12, 2014 at 20:40

answered May 12, 2014 at 14:04

Buck Doyle

6,4071 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

SHT Over a year ago

Hmm this didnt have any effect at all unfortunately... :-/

Buck Doyle Over a year ago

What happens if you manually call wookmark in the Javascript console?

SHT Over a year ago

When I console.log(wookmark) nothing happens! So apparently the plugin does not get triggered...!?!?

Buck Doyle Over a year ago

Sorry, I should have been more precise. I’m suggesting that you manually execute the code that is supposed to be executed in the script. You can pretty much copy and paste the variable definitions. Then try handler.wookmark(options) and see what happens.

Buck Doyle Over a year ago

Okay, I updated the answer with a link to a working fiddle and a description of what fixed it.

|

SHT · Accepted Answer · 2014-05-28 14:24:43Z

0

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!

answered May 28, 2014 at 14:24

SHT

7204 gold badges19 silver badges39 bronze badges

Collectives™ on Stack Overflow

BackboneJS + Require JS + Wookmark.js plugin not working

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related