Geek Answers Handbook

Requirejs + Backbone Uncaught TypeError: cannot read property 'Model' from undefined

I started with Backbone. I used Require to load the module and received this error. Can someone explain this? In user.js file, I have this error when I try to create Backbone.Model.extend. I used Backbone.js 0.9.10, jQuery v1.9.0, RequireJS 2.1.4, Underscore 1.4.4. Thanks.

index.html

<!doctype html> <html lang="en"> <head> <title></title> <!-- Load the script "js/main.js" as our entry point --> <script data-main="js/main.js" src="js/libs/require/require.js"></script> <link rel="stylesheet" type="text/css" href="stylesheets/style.css"> </head> <body> <div id="container"> <div id="menu"></div> <div id="content"></div> </div> </body> </html>

main.js

 require.config({ paths:{ jquery:'libs/jquery/jquery-min', underscore:'libs/underscore/underscore-min', backbone:'libs/backbone/backbone-min', templates:'../templates' } }); require(['app'], function (App) { console.log('____main.js') App.initialize(); console.log('main.js') });

app.js

 define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, Router) { var initialize = function(){ Router.initialize(); console.log('app.js'); }; return { initialize: initialize }; });

router.js

 define([ 'jquery', 'underscore', 'backbone', 'views/home/login' //'views/room', // 'views/friend', // 'views/play', // 'views/money' ], function ($, _, Backbone, loginView) { console.log('router.js'); var AppRouter = Backbone.Router.extend({ routes:{ '/home':'showHome', '*actions':'defaultAction' }, showHome:function () { loginView.render(); }, defaultAction:function (actions) { console.log('No route:', actions); } }); var initialize = function(){ var app_router = new AppRouter; Backbone.history.start(); }; return { initialize: initialize }; });

login.js (Backbone View)

 define([ 'jquery', 'underscore', 'backbone', 'collections/home/users', 'text!templates/home/login.html' ], function($, _, Backbone, usersCollections, homeLoginTemplate){ var loginView = Backbone.View.extend({ el: $('container'), render: function(){ var data = {}; var compiledTemplate = _.template(homeLoginTemplate); this.el.append(compiledTemplate); } }); console.log('login.js'); return new loginView; });

user.js (base model)

 define([ 'underscore', 'backbone' ], function (_, Backbone) { console.log('user model'); var userModel = Backbone.Model.extend({ default:{ username:"", password:"" } }); return userModel; });

users.js (Layout Collection)

 define(['underscore', 'backbone', 'models/user'], function (_, Backbone, userModel) { console.log('user collection'); var usersCollection = Backbone.Collection.extend({ model:userModel }); return new usersCollection; });

I can not post my photo. But you can see in this link http://imageshack.us/photo/my-images/809/devi.jpg/ .

+6
source share
2 answers

Use this @Ingro and try to use the default underscore when invoked to render templates.

eg:

main.js

 require.config({ paths:{ jquery:'libs/jquery/jquery-min', underscore:'libs/underscore/underscore-min', backbone:'libs/backbone/backbone-min', templates:'../templates' }, shim: { backbone: { deps: ['jquery','underscore'], exports: 'Backbone' } } }); require(['app'], function (App) { console.log('____main.js') App.initialize(); console.log('main.js') });

and in any file that you use Underscore templates, for example, your "login.js" uses this:

 define([ 'backbone', 'collections/home/users', 'text!templates/home/login.html' ], function(Backbone, usersCollections, homeLoginTemplate){ var loginView = Backbone.View.extend({ el: $('container'), render: function(){ var data = {}; var compiledTemplate = _.template(homeLoginTemplate); this.el.append(compiledTemplate); } }); console.log('login.js'); return new loginView; });

jquery and underscore are both used by default for trunk require a call. I hope they help you.

+5
source

You may be missing the shim configuration in the main.js file, read here: http://requirejs.org/docs/api.html#config-shim

You can try adding:

 shim: { 'backbone': { deps: ['jquery','underscore'], exports: 'Backbone' } }
+5
source

More articles:


All Articles