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:
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();
});
});