Cannot initialize an object loaded via requireJS

Question

When I try to initialize an object declared/defined in a different file (but I believe it's been loaded via requireJS), it gives me ReferenceError: myTemplates is not defined. I have two files: main.js and templates.js.

In main.js (which is where I would like to load the object from templates.js and initialize it,

define(["jquery-ui", "templates"], function () {

  var templates = new myTemplates();     // gives ReferenceError
  alert( "Never reached this call" + $().jquery);

  $(document).ready(function() {
    alert( "Never reached this call " + $().jquery);
  });

});

In templates.js, which just have an object named myTemplates with a function named test as follows

define(["jquery-ui"], function () {
  alert( "This alert is raised, proving that jQuery/jQuery UI is loaded in templates.js " + $().jquery);

  function myTemplates(){
    this.test = function(){
      alert('test');
      return false;
    };
  };
});

For the config file for requireJS, named requireconfig.js, I have

requirejs.config({
  "baseUrl": "scripts/lib",
  "paths": {
    "app": "../app",
    "jquery" : [
        "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min", 
        "jquery-1.10.2.min"],
    "jquery-ui" : [
        "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min",
        "jquery-ui-1.10.3.min"],
    "templates" : "../app/templates/templates"
  },

  shim: {
    "jquery-ui": {
       exports: "$",
       deps: ["jquery"]},
  }
});
requirejs(["app/main", "templates"]);

I'm pretty sure the jQuery and jQuery UIs are loaded properly in templates.js, but I can't understand why I'm getting ReferenceError for initializing myTemplates in main.js. Could anyone please take a look and help me out. Thank you.

p.s. The Github upload of the files/folders is here in case anyone wants to look at the folder/file hierarchy.

Cauliturtle · Accepted Answer · 2013-07-16 04:49:39Z

1

OK, two problems

in templates.js, once you defined a object, or function, you have to return it

function myTemplates(){ ... };
return myTemplates;

in main.js, you have to give a reference name for those defined objects, unless they are not AMD or defined in shim config.

define(["jquery-ui", "templates"], function ($ui, myTemplates)

give a try!

answered Jul 16, 2013 at 4:49

Cauliturtle

6911 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1330974 Over a year ago

Thank you @Cauliturtle. I followed your suggestion above and it works! Is it possible to make the function myTemplates, an AMD and if so, could you please give me a brief answer or direct me to a guide online? Thank you again.

Cauliturtle Over a year ago

yes, your approach has no problem. But I suggest you to use Backbone.js, which help you easy to care about your view.

user1330974 Over a year ago

Thank you, @Cauliturtle. I've read about Backbone.js, but seems like it's time I learn it. :) Thank you for taking time to contribute to StackOverflow to pass down the knowledge and help others.

Collectives™ on Stack Overflow

Cannot initialize an object loaded via requireJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related