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 .. ;)
Related
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.
I've started a new backbone, marionette and require project using version 2.2 (i previously worked with 1.8) It seems a lot has changed. I'm getting an error when the browser loads marionette:
Uncaught TypeError: Cannot read property 'ChildViewContainer' of undefined
This is my main.js file:
require.config({
baseURL: 'scripts',
paths: {
"jquery": "lib/jquery",
"underscore": "lib/underscore",
"backbone": "lib/backbone",
"marionette": 'lib/backbone.marionette',
"templates": "../templates",
"text": "lib/text"
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
marionette: {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
waitSeconds: 15
}
});
require([ "app", "marionette"], function(App, marionette) {
App.start();
});
And this is my app.js file:
define(["marionette", "router"], function (Marionette, AppRouter) {
var MyApp = Marionette.Application.extend({
initialize: function(options) {
console.log("options.container");
}
});
var MyApp = new MyApp({container: '#page'});
MyApp.addInitializer(function (options) {
MyApp.Router = new AppRouter();
Backbone.history.start();
});
// export the app from this module
return MyApp;
});
Just look at your backbone.js file. It's empty. Download backbone.js from http://backbonejs.org/ and replace it.
I just ran into this same issue myself. The issue was multiple instances of Marionette being included on the page. (i had errantly placed a script tag for marionette on the page from cdnjs, as well as trying to include the static file locally via require). removing the reference to the external JS file helped me...
I have managed to make my Backbone app work with IE8 - IE Edge... Yey:)
The last stone is IE7 - I get the following Backbone error:
'JSON' is undefined - file: backbone.js
And there is some part of the backbone library code highlighted by IE's console:
s.data=JSON.stringify(i.attrs||e.toJSON(i)
From what I read, I have to load JSON2 or JSON3 library because IE7 does not have it.
Ok, googled and go the following library - JSON 3:
http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js
Now, I use require js to load my application, and I have no idea how to integrate this with my app config.
What are it's dependencies, what does it export?
Here is my config for require js:
/**
* Config.
*/
require.config({
paths: {
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
shim: {
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text : {
exports : 'text'
}
},
global : {
deps: ["jquery"],
exports : 'Global'
}
});
require([
'jquery',
'underscore',
'backbone',
'router',
'global'
], function ($, _, Backbone, Router) {
// Compatibility override, add a close function for the Backbone views.
var router = new Router();
Backbone.history.start();
});
Any ideas?
First add the json library to your path config:
paths: {
"json": "http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js",
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
The json library has no dependencies and exports a global variable JSON. You will need to make the backbone library depend on the json library, and load the JSON library with a shim config. See below:
shim: {
json: {
exports: 'JSON'
},
backbone: {
deps: ["underscore", "jquery", "json"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text: {
exports: 'text'
}
}
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.
Creating a new application with Backbone.Marionette, when I run the Express app and load the page I get an error in the console:
Uncaught TypeError: Cannot read property 'EventAggregator' of undefined
backbone.marionette.js:1504
Showing that it's in the actual marionette library. I've look at that line:
Marionette.EventAggregator = Backbone.Wreqr.EventAggregator;
and am thinking that wreqr might be an additional library I have to add?
Here's the code that creates the app:
require([
'jquery',
'underscore',
'backbone',
'marionette'
], function( $, _, Backbone, Marionette ){
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
main_region: '#main_region'
});
MyApp.addInitializer( function(options) {
var login_form_view = new LoginFormView();
});
});
and the require config that sets up the library locations:
// using RequireJS 1.0.7
require.config({
paths: {
'$': 'libs/jquery-1.8.2-min',
'underscore': 'libs/underscore-min', // AMD support
'backbone': 'libs/backbone.min', // AMD support
'bootstrap' : 'libs/bootstrap.min',
'marionette' : 'libs/backbone.marionette',
'wreqr' : 'libs/backbone.wreqr',
'templates': '../templates',
'text': 'libs/require/text',
'login': 'views/user/login'
}
});
Anyone know what could be causing the error?
Yes, wreqr is a dependency to Marionette.
You have specified the path to Wreqr, but you need to load it too. Before you load Marionette.
require([
'jquery',
'underscore',
'backbone',
'wreqr',
'marionette'
], function( $, _, Backbone, Marionette ){
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
main_region: '#main_region'
});
MyApp.addInitializer( function(options) {
var login_form_view = new LoginFormView();
});
});