Defining a global App Namespace with Require.js and Backbone - javascript

I'm new to Require.js, and I'm trying to do something which I thought would be simple but is starting to be a pain.
I'm trying to define a global namespace for my Backbone application, and load it as a module. Here is my namespace (main.js):
define(
['jquery',
'underscore',
'backbone',
'GlobalRouter'
],
function($, _, Backbone) {
var App= {
Models: {},
Views: {},
Collections: {},
Routers: {},
init: function() {
new App.Routers.GlobalRouter();
Backbone.history.start();
}
}
return App;
});
and here is my config.js file:
require.config({
// your configuration key/values here
baseUrl: "js", // generally the same directory as the script used in a data-main attribute for the top level script
paths: {
'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
'underscore': 'vendor/underscore-min',
'backbone': 'vendor/backbone-min',
'marionette': 'vendor/backbone.marionette',
'main' : 'main'
}, // set up custom paths to libraries, or paths to RequireJS plugins
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'main' : {
deps: ['underscore', 'jquery', 'backbone', 'GlobalRouter'],
exports: 'TEWC'
}
} // used for setting up all Shims (see below for more detail)
});
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
$(function() {
App.init();
});
}
);
and for good measure, here is my router:
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, TEWC) {
TEWC.Routers.GlobalRouter = Backbone.Router.extend({
routes: {
"" : "index",
"documents/:id" : "edit",
"login" : "login"
},
edit: function(id) {
alert('edit')
},
index: function() {
alert('index')
},
login: function() {
alert('login')
}
});
});
In the past, I was getting a 'app is undefined error'. Now, I get a load timeout error after a few minutes that says this:
Uncaught Error: Load timeout for modules: main
However, the alert doesn't fire, and main.js doesn't seem to get loaded, but I believe router does, and it doesn't bark that TEWC is undefined -- so it may be loading even though it's not in my Network tab?
This is probably a rookie question -- does anyone have any insight on this?

The following code does not define GlobalRouter yet it get's passed to the define callback
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
$(function() {
App.init();
});
}
add GlobalRouter to define
Secondly, when it fails to load main ..can you check from console what URL it is trying to access? It most probably is a mis-configuration.

If I'm not mistaken your problem is that in config.js, after the require.config(), your define() should be a require() instead.
Explaining further. You currently have:
define([
'jquery',
'underscore',
'backbone',
'main'
...
This define should be a require because this is code you want executed; it is not a module definition.
This and of course the missing GlobalRouter dependency as noted earlier.

Related

RequireJS + Bootstrap

I'm trying to use Bootstrap after loading it by RequireJS. Tried almost everything but still getting: Uncaught TypeError: $(...).modal is not a function
config:
require.config({
paths: {
jquery: 'vendor/jquery-1.10.2.min',
underscore: 'vendor/lodash',
backbone: 'vendor/backbone.min',
text: 'vendor/plugins/text',
bootstrap: 'vendor/bootstrap.min'
},
shim: {
bootstrap: {deps : ['jquery'], exports: '$'}
}
});
require([
'app',
'bootstrap'
], function(App){
App.initialize();
});
file that is supposed to use modal()
define([
'jquery',
'underscore',
'backbone',
//...
'bootstrap'
], function($, _, //...
){
//.......
renderPlaceForm: function(e) {
e.preventDefault();
$('#place-modal').modal('show');
}
//.....
I also tried omitting the "exports", loading bootstrap in App is also one of my tries. What is wrong?
Check if it will work with jQuery(...).modal. your jQuery may be in compatability mode, also check if jQuery and bootstrap are not included twice.

Backbone.js and Require.js

I want to create Backbone.js app with Require.js.
But I have an error in console: Uncaught Error: Module name "underscore" has not been loaded yet for context: _. Use require([])
require.config({
baseUrl: 'js/',
paths : {
'jquery' : 'jquery',
'underscore' : 'underscore',
'backbone' : 'backbone',
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
}
});
define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){
var Model = Backbone.model.extend({});
var model = new Model;
});
require(['app','jquery', 'backbone', 'underscore']);
How I can resolve this problem?
You still need to list underscore as a part of paths so you can refer to it in the shims. Also, not sure what your directory structure looks like, but I'm writing this with the assumption that library code is in the /js/libs directory). Finally, note you won't need to require any of the dependencies of app -- the joy of RequireJS is that it'll figure out what to load.
So...
require.config({
baseUrl: 'js/',
paths : {
'jquery' : 'lib/jquery',
'underscore' : 'lib/underscore',
'backbone' : 'lib/backbone',
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){
var Model = Backbone.Model.extend({});
var model = new Model({
foo: 'bar'
});
var app = {
model: model
};
// ...
return app;
});
require(['app'], function(App) {
App.model.get('foo'); // <<=== returns 'bar'
});
The shim is mentioned inside the paths object. I am not sure if that is the problem, but wanted to mention that here.
You need Underscore.js as listed in your require statement.

What is wrong with my requirejs setup?

My requirejs config file looks correct to me. But when I get into my function to fire up my application, I only have access to jQuery. Could someone look at my config file and tell me what I am doing wrong? Why can't I see Backbone or Underscore and why can I see jQuery? Here is my config file:
require.config({
paths: {
jquery: "libs/jquery/jquery",
underscore: 'libs/underscore/underscore',
backbone: "libs/backbone/backbone"
},
shims: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
'use strict';
debugger;
});
Thanks for the help.
I think you have shims instead of shim in singular, changing it should fix your issue.
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
}
The versions of underscore and backbone you are using are not AMD compliant, so they don't return in the way require.js needs them to. You can just leave them off of your function params and they will be available on the global scope. Otherwise, you are passing undefined into your function as the value of _ and Backbone.
require(['jquery', 'underscore', 'backbone'], function() {
console.log($);
console.log(_);
console.log(Backbone);
});

Issues in loading LayoutManager using requirejs

I'm new to require js and i'm using backbone with layout manager. I've pasted my code below and i'm not able to get the layout manager to work and i get this error :
"Uncaught TypeError: Cannot call method 'extend' of undefined"
in line where layoutmanager is used (Backbone.LayoutView.extend)
Main.js
require.config({
paths: {
jquery: 'lib/jquery-1.9.1.min',
underscore: 'lib/underscore-min',
backbone: 'lib/backbone-min',
handlebars: 'lib/handlebars',
layoutManager : 'lib/backbone.layoutmanager'
mousewheel : 'lib/jquery.mousewheel.min'
},
shim : {
'backbone' : {
deps: ['jquery', 'underscore' ],
exports: 'Backbone'
},
'layoutManager' : {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'LayoutManager'
},
'mousewheel' : ['jquery']
}
});
require(["jquery", "underscore", "backbone", "layoutManager", "handlebars","mousewheel", "common"],function($, _, Backbone, LayoutManager, Handlebars,mousewheel, App) {
App.Views.HelloView = Backbone.LayoutView.extend({
template : '#hello_tmpl1',
});
App.Layouts.AppLayout = new BackBone.Layout({
template : '#layout',
views : {
".helloView" : new App.Views.HelloView()
}
});
$('body').empty().append(App.Layouts.AppLayout.el.render());
});
Common.js
define(function(){
var App = null;
App = { Models:{}, Views:{}, Collections:{}, Templates:{}, Router:{}, Layouts:{}};
return App;
});
function($, _, Backbone, LayoutManager
Here you name it LayoutManager.
App.Views.HelloView = Backbone.LayoutView.extend({
Here you try to use it as Backbone.LayoutView... which doesn't exist (thus the undefined). Try
App.Views.HelloView = LayoutView.extend({
The Backbone var you have here is different from the global one, think requirejs :)
New version of layoutmanager doesn't use 'LayoutView' to create views. Use Backbone.Layout.extend({ ...}) to create your views ... have fun .. ;)

handlebars in requirejs load not successfully

paths: {
jquery: 'libs/jquery/jquery-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-optamd3-min',
handlebars: 'libs/handlebars/handlebars',
text: 'libs/require/text'
}
define([
'jquery',
'underscore',
'backbone',
'collections/todos',
'views/todos',
'text!templates/stats.html',
'common',
'handlebars'
], function ($, _, Backbone, Todos, TodoView, statsTemplate, Common, handlebars) {
//handlebars is null
console.log("handlebars is",handlebars);
})
Except handlebars,others can load successfully.Why and how to make handlbars load successfully.thanks
Firstly, I can see that you're new but please try to add more detail to your question to help others help you.
From glancing at the source I don't think Handlebars is compatible with AMD, therefore you will need to shim it yourself. Something like this:
requirejs.config({
shim: {
'handlebars': {
exports: 'Handlebars'
}
}
});

Categories

Resources