Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot read property 'View' of undefined

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.

like image 951
Jürgen Paul Avatar asked Dec 19 '12 02:12

Jürgen Paul


People also ask

What does Cannot read properties of undefined mean?

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.

Can not read the property then of undefined?

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 .

Can not read the property of undefined top?

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.

Can not read the property replace of undefined?

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.


1 Answers

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();
});
like image 158
BAK Avatar answered Sep 23 '22 21:09

BAK