I can't seem to get zepto to work with requirejs.
Here are my files
main.js
require.config({
paths: {
zepto: 'libs/zepto/zepto.min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
cordova: 'libs/cordova/cordova-2.1.0',
history: 'libs/history/history',
historyZ: 'libs/history/history.adapter.zepto'
},
shim: {
zepto: {
exports: '$'
},
backbone: {
deps: ['underscore', 'zepto']
}}
});
require([
// Load our app module and pass it to our definition function
'app',
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
});
app.js
define([
'zepto',
'underscore',
'backbone',
'router' // Request router.js
], function($, _, Backbone, Router){
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
}
return {
initialize: initialize
};
});
router.js
define([
'zepto',
'underscore',
'backbone',
'views/dashboard'
], function($, _, Backbone, DashboardView){
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'' : 'showDashboard',
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('showDashboard', function(){
// We have no matching route, lets just log what the URL was
//console.log('No route:', actions);
var dashboardView = new DashboardView();
dashboardView.render();
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
You get the picture.. But when I run this all, I get this in Chromes console:
GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found) require.js:1824
and a script error (I threw in parenthesis bc this wouldnt let me post.)
and in Firefox with firebug, it spits out a scripterror
Has anyone had success configuring zepto with require and can throw me some help?
Backbone normally has a "define(["underscore","jquery","exports"],.." in it, should just have to replace that. Then, I appended the following snippet at the end of zepto.js.
// If `$` is not yet defined, point it to `Zepto`
window.Zepto = Zepto
'$' in window || (window.$ = Zepto)
if ( typeof define === "function" && define.amd ) {
define( "zepto", [], function () { return Zepto; } );
}
It seems to work. If you want to have jquery as a back up, (this is dirty) but I defined "zepto" as "jquery" in the zepto.js file, then in the requirejs.config I did this...
requirejs.config({
paths: {
// Jquery should be zepto, probably a better way to do this...
jquery: RegExp(" AppleWebKit/").test(navigator.userAgent) ? '/js/vendor/zepto' : '/js/vendor/jquery.min',
underscore: '/js/vendor/underscore.min',
backbone: '/js/vendor/backbone.min'
}
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
// Stuff here...
});
But By doing that I didn't have to modify the backbone.js define file for jquery and I brought in browser support for IE...