Using RequireJS and Backbone, is it possible to avoid the classic call
$(document).ready(function () {
});
I just want to know if I can avoid it, if I am using RequireJS and Backbone. How is it possible to avoid that call?
Yes, actually you don't need this using require.js
1st
<script data-main="main.js" src="path/require.js"></script>
On main file you could have something like this:
require.config({
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
},
paths: {
jquery : 'path/jquery',
underscore : 'path/underscore',
backbone : 'path/backbone'
}
});
require(
[
'backbone',
'router'
],
function (Backbone, Router) {
var router = new Router();
}
);
Related
Once in three I got "backbone is not defined error". It's pointing to line 19 in requirejs file (router is declared in path line 21). It's like sometimes backbone is loading fast enough and sometimes not. I don't know what I did wrong. Below a part of the requirejs file and initialization.
require.config({
paths: {
//libs
jquery: '../../bower_components/jquery/dist/jquery.min',
// "jquery-ui": '../bower_components/jquery-ui/jquery-ui.min',
lodash: '../../bower_components/lodash/lodash',
backbone: '../../bower_components/backbone/backbone-min',
underscore: '../../bower_components/underscore/underscore-min',
gridstack: '../../libs/gridstack/dist/gridstack',
text: '../../bower_components/text/text',
router: '/client/js/router/router',
//other modules ...
}
shim: {
"backbone": {
deps: ['underscore','jquery'],
exports: "backbone"
},
"underscore": {
exports: "_"
},
"jquery": {
exports: "$"
},
"gridstack": {
deps: ['jquery','underscore'],
exports: "Gridstack"
}
});
require([
'jquery', 'backbone', 'lodash', 'router',
], function( $, Backbone, _, Router){
new Router();
Backbone.history.start();
});
And here is how my router is declared:
define('router',['appView'] , function(AppView) {
var router = Backbone.router.extend({
// etc/
One error I see is in your shim for Backbone in the RequireJS configuration. Older versions of Backbone that don't support RequireJS explicitly will export the global variable Backbone, not backbone. So ...
"backbone": {
deps: [ 'underscore', 'jquery' ],
exports: 'Backbone'
}
Note that any version of BackboneJS after 1.1.1 supports AMD-style modules, so you should not need a shim at all if you are using a recent version. In fact, using a version that supports AMD, but incorrectly declaring the shim, might be what is causing the 1-in-3 failure... but I'd have to see a running example to know for sure.
I don't understand what I'm doing incorrectly. I'm trying to use Backbone LayoutManager in my application and the simple code below causes the error: 'Cannot call method 'bind' of undefined'
This is my main.js file:
require.config({
paths: {
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone',
layoutManager: 'libs/backbone.layoutmanager',
knockout: 'libs/knockout',
templates: '../templates'
},
shim: {
backbone: {
deps: ['jquery','underscore'],
exports: 'Backbone'
},
layoutManager: {
deps: ['jquery','underscore', 'backbone'],
exports: 'LayoutManager'
}
}
});
require([
'app',
'backbone',
'layoutManager'
], function(App, Backbone, LayoutManager) {
// Set all Views to be managed by LayoutManager.
Backbone.Layout.configure({ manage: true });
App.initialize();
});
Any idea what's causing this error?
Depending on the version of LayoutManager that you're using, it could be that you're shimming incorrectly. Latest LayoutManager supports AMD, so the shim is unnecessary.
As noted by #kryger's comment you received, ensure that underscore is properly shimmed. I'm willing to bet that's your problem.
shim: {
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
underscore: { exports: '_' }
}
You can also check out the documentation for configuring AMD: https://github.com/tbranyen/backbone.layoutmanager/wiki/Installation#asynchronous-module-definition-amd
^^ I've updated the above to contain the line for underscore shimming as well.
I am using require.js, and in my config file I am calling the following to start the app (using this page as a reference: http://backbonetutorials.com/organizing-backbone-using-modules/):
require(['backbone', 'jquery', 'app'], function(Backbone, $, App) {
console.log('no dependancies loaded');
});
However when it complies (via grunt.js) it doesn't load backbone and jquery - it doesn't even list any dependancies. However if I remove the app require backbone and jquery are loaded, e.g.:
require(['backbone', 'jquery'], function(Backbone, $) {
console.log('dependancies loaded');
});
main.js
require.config({
paths: {
jquery: 'vendor/jquery',
underscore: 'vendor/underscore',
backbone: 'vendor/backbone'
},
shim: {
jquery: [],
backbone: {
deps: ['vendor/underscore', 'vendor/jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['backbone', 'jquery', 'App'], function(Backbone, $, App) {
App.initialize();
});
app.js
define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, Router){
var initialize = function() {
// Pass in our Router module and call it's initialize function
Router.initialize();
};
return {
initialize: initialize
};
});
No error messages are shown. Why does it not pick them up?
Xylar, change shim backbone - `deps: ['underscore', 'jquery']
I have a problem with an r.js build in my app loader.
Unbuild mode is working perfect but after a build with r.js the variables in app_loader.js#L7 bb and hb are undefined. So far I work around by using global variables Handlebars und Backbone but what is wrong with this shim?
I have removed your global references and tested this locally. It works.
build.js - updated to use app_main as config file
({
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
appDir: "../www-root-dev",
dir: "../www-root",
keepBuildDir: false,
optimize: "uglify2",
mainConfigFile: "../www-root-dev/assets/js/app_main.js",
modules: [{
name: "app_main"
}]
})
app.js
define(["app_loader"], function(loader){
var $ = loader.$, Backbone = loader.Backbone;
...
});
app_loader.js
define(["jquery","underscore","backbone","handlebars","app_routes"],
function($, _, Backbone, Handlebars, router){
return {
$: $.noConflict(),
_: _,
Backbone: Backbone,
router: router,
Handlebars: Handlebars
};
});
app_main.js - updated to simplify paths
require.config({
baseUrl: './assets/js',
paths: {
mvc: '../../mvc'
},
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
deps: ['jquery'],
exports: 'Handlebars'
}
}
});
require(['app'], function(App){
App.initialize();
});
app_routes.js
define(["jquery", "underscore", "backbone", "mvc/demo.view.js", "mvc/demo.model.js"], function($, _, Backbone, DemoView, DemoModel) { ... });
demo.model.js
define(["backbone"], function(Backbone) { ... });
demo.view.js
define(["jquery","backbone","text!mvc/demo.html"], function($, Backbone,demoTemplate) { ... });
I think the error is because in your shim you have exported backbone and handlebar as Backbone and Handlebars respectively,
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars:{
deps: ['jquery'],
exports: 'Handlebars'
},
and in your app_loader.js#L7 you are using it as bb and hb.
Either in shim export it as bb and hb:
backbone : {
deps: ['underscore', 'jquery'],
exports: 'bb'
},
handlebars:{
deps: ['jquery'],
exports: 'hb'
},
or use Backbone and Handlebars in app_loader.js#L7 instead of bb and hb:
define("app_loader",[
"jquery",
"underscore",
"backbone",
"handlebars",
"order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){
I am also new to backbone and requirejs but it should help.
I have forked your github project and use grunt requirejs to run the optimization.
I manage to run the site and didn't notice any console errors in Chrome.
I took your project and noticed the errors in your build. I then made some changes to your app_main.js file as follows. Let me know if this solves your issues? Solved mine.
// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config({
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
},
paths: {
appLoader: 'app_loader',
jquery: 'jquery',
underscore: 'underscore',
backbone : 'backbone' ,
handlebars: 'handlebars'
}
});
require([
'app'
], function(App){
App.initialize();
});
Hi all Im trying to load backbone and backbone-relational in require js every time I just require 'backbone', this is my code:
main.js:
requirejs.config({
paths: {
'domReady': 'lib/require/domReady',
'text': 'lib/require/text',
'jquery': 'lib/jquery/jquery',
'underscore': 'lib/underscore',
'backbone': 'lib/backbone/loader',
'relational': 'lib/backbone/relational',
'iosync': 'lib/backbone/iosync',
'iobind': 'lib/backbone/iobind'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'relational': {
deps: ['backbone']
},
'iobind': {
deps: ['backbone']
},
'iosync': {
deps: ['backbone']
}
}
});
require([
'domReady!',
'jquery',
'backbone',
'models/application',
'views/application'
], function () {
// start the app
var applicationModel = new BACON.models.Application();
var applicationView = new BACON.views.Application({
el: $('body'),
model: applicationModel
});
});
and lib/backbone/loader.js:
define([
'lib/backbone/backbone',
'relational',
'iobind',
'iosync'
]);
but running my app on chrome gives me:
Uncaught Error: Load timeout for modules: relational,iobind,iosync
So it seems i have a dependency loop... Is there a way to make this work or is there another way to accomplish this??
In your shim config you added a depedency for relational to backbone, which refer to libs/backbone/loader, and this generate a loop while loading lib/backbone/loader.js.
You should change your path config for backbone to 'lib/backbone/backbone' and add another named path for the loader if you want.