Calling Functions with Require.js

Question

I have a JavaScript file named navigationView as follows:

define(['underscore', 'backbone'], function (_, Backbone) {
function navigationBuild() {
    $.ajax({
        async: false,
        url: "http://myapi/articles/categories",
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {

            // Append values to Navigation
            $.each(data, function (navigationindex, navigationvalue) {
                $('nav').append('<a href="#/' + navigationvalue.shortName + '">' + navigationvalue.displayName + '</a> ');
            });
        }
    });
}
});

I am trying to call this with Require.js so that it is loaded with each page. This builds my navigation. Here is my app.js where I attempt to have a function call, but it gives me an error of "Uncaught TypeError: Cannot read property 'navigationBuild' of undefined". I suspect that I need a return value in my navigationView file.

require.config({
paths: {
    jquery: "libs/jquery-2.1.0.min",
    underscore: "libs/underscore-min",
    backbone: "libs/backbone-min",
    navigation: "views/navigationView"
},
shim: {
    underscore: {
        exports: "_"
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
}
});

require(['navigation'], function(navigation) {
navigation.navigationBuild();
});

require(['routers/siteRouter'], function (router) {
new router;
 });

How do I call functions from JavaScript files using Require.js?

Jack · Accepted Answer · 2014-06-25 15:24:09Z

In your navigation.js file you aren't returning anything. Modify it so that you assign your function to a variable and return that.

For example

define(['underscore', 'backbone'], function (_, Backbone) {
   var navigationBuild = function () {
    $.ajax({
        async: false,
        url: "http://myapi/articles/categories",
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {

            // Append values to Navigation
            $.each(data, function (navigationindex, navigationvalue) {
                $('nav').append('<a href="#/' + navigationvalue.shortName + '">' + navigationvalue.displayName + '</a> ');
            });
        }
    });
}

return navigationBuild;
});




require(['navigation'], function(navigation) {
   navigation();
});

That said it might be neater and more flexible to instead return an object that has methods, for example

define(['underscore', 'backbone'], function (_, Backbone) {
  var navObj = {
     build: function () {
       ....
      }
   };


  return navObj;

});

require(['navigation'], function(navigation) {
   navigation.build();
})

Collectives™ on Stack Overflow

Calling Functions with Require.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related