Search code examples
twitter-bootstrapbackbone.jsrequirejsspin.js

Spinner is not defined in Ladda with RequireJS


I am trying to place a ladda button on page rendered by backbone with require.js along with bootstrap components. However, I got

"Uncaught ReferenceError: Spinner is not defined".

I cut out the minified spin.js from the original ladda.js and put them in the same directory.

Shim'ed ladda as below:

require.config ({
   paths: {
            //jquery, underscore, backbone here
            spin : 'libs/ladda/spin',
            ladda: 'libs/ladda/ladda'
   },

   shim: {
        ladda: {
            deps: ['spin'],
            exports: 'Ladda'    
    }
}
});

In backbone view:

define([
  'jquery',
  'underscore',
  'backbone',
  'bootstrap',
  'spin',
  'ladda',
 ], function($, _, Backbone, Bootstrap, Spinner, ladda){
    render: function () {
        //templating

        console.log ('Spinner: ' + typeof Spinner);
        Ladda.create ($('button'));    
   }
});

I could see typeof Spinner is a function. Spinner.name property is "p". Shouldn't Spinner.name be "Spinner" instead of "p"? or "p" is inherit from minified variable?

What other steps I miss out to make Spinner visible in scope to ladda.js? Appreciate any advice render.

Thank you.

Update: Thanks to Bass Jobsen's advice, use hakimel committed spin.js, Spinner is loaded but error still persist. Below Chrome Dev Tool console:

chrome devtool screenshot


Solution

  • Based on github.com/hakimel/Ladda/pull/7 i rewrote spin.js to a class like Ladda itself. I used define instead require (http://bardevblog.wordpress.com/2013/01/05/re-learning-backbone-js-require-js-and-amd/). Now spinner is a object too.

    Ladda.bind() doesn't seems to work (or i don't understand what to expect). You could create a new button object: Ladda.create();

    See: http://plnkr.co/edit/DuIVFP0UP8sSoek9gEZc

    //https://github.com/requirejs/example-jquery-cdn   
    requirejs.config({
        //"baseUrl": "js/lib",
        enforceDefine: true,
        "paths": {
          "app": "app",
          "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
          "spin": "spin",
          "ladda": "ladda"
        },
        shim: {
            "spin": {exports: "Spinner"},
            "ladda": {
                depends: "spin",
                exports: "Ladda"
            },
    
    
    
            }
    });
    
    // Load the main app module to start the app
    requirejs(["app/main"]);
    

    app/main.js:

    define(["jquery",'ladda','spin'], function($,ladda) {
        //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
        $(function() {
          console.log("$: " + typeof $);
          console.log("ladda: " + typeof Ladda);
          console.log("spin: " + typeof Spinner);
    
          Ladda.bind($('button')[0]); //don't work ????????????
          //return;
          //Ladda.create('.ladda-button');
          var l = Ladda.create($('button')[1]);
    
        l.start();
    
    // Will display a progress bar for 50% of the button width
    l.setProgress( 5 );
    
    // Stop loading
    l.stop();
    
    // Toggle between loading/not loading states
    l.toggle();
    
    // Check the current state
    l.isLoading();
    
    
        });
    });