This is my first time to use require.js with backbone, and I'm struggling to find the problem with my view:
Cannot read property 'View' of undefined // search.js:8
My directory structure is:
.
├── index.php
└── js
├── app.js
├── lib
│ ├── backbone.js
│ ├── backbone-min.js
│ ├── jquery-min.js
│ ├── require.js
│ └── underscore-min.js
├── main.js
├── model
├── router.js
├── text.js
└── view
├── error.js
└── search.js
My main.js
:
require.config({
paths: {
jquery: 'lib/jquery-min',
underscore: 'lib/underscore-min',
backbone: 'lib/backbone-min',
templates: '../templates'
}
});
require([
'app'
], function(App){
App.initialize();
});
My app.js
:
define([
'jquery',
'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
};
});
My router.js
:
define([
'jquery',
'underscore',
'backbone',
'view/search', // requests view/search.js
], function($, _, Backbone, SearchView){
var AppRouter = Backbone.Router.extend({
routes: {
"": "home"
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('route:home', function(){
var homeView = new SearchView();
homeView.render();
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
and my view/search.js
:
define([
'jquery',
'underscore',
'backbone',
'text!templates/search.html'
], function($, _, Backbone, searchTemplate){
// console.log($,_,Backbone);
var SearchView = Backbone.View.extend({
...
});
return SearchView;
});
When I uncommented the console.log above, both _
and Backbone
is undefined
but $
isn't. What have I missed? All my lib files are of the latest version.
Causes for TypeError: Cannot Read Property of Undefined In short, the value is not assigned. In JavaScript, properties or functions are Objects, but undefined is not an object type. If you call the function or property on such variable, you get the error in console TypeError: Cannot read undefined properties.
Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined .
There are 2 main reasons the "Cannot read property 'top' of undefined" error occurs: Accessing the top property on a DOM element that doesn't exist. Inserting the JS script tag above the HTML, where the DOM elements are declared.
The "Cannot read property 'replace' of undefined" error occurs when calling the replace() method on an undefined value. To solve the error, provide a fallback for the value if it's equal to undefined and conditionally check that it stores the correct data type before calling the method.
Backbone and Underscore are not AMD-compliant. By default, they don't provide an interface compatible with RequireJS.
In last versions, RequireJS provide a useful way to solve the problem:
Your main.js:
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
},
paths: {
jquery: 'lib/jquery-min',
underscore: 'lib/underscore-min',
backbone: 'lib/backbone-min',
templates: '../templates'
}
});
require([
'app'
], function(App){
App.initialize();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With