Requirejs wrong dependencies order

Question

I've got a variable saved in a js file: Subcategories.js. Something like this(but actually much, much bigger):

define({
    subcategories: { 
        "Category1":
        [
            "Subcategory1-1", "Subcategory1-2", "Subcategory1-3"
        ],
        "Electrical":
        [
            "Subcategory2-1", "Subcategory2-2", "Subcategory2-3", "Subcategory2-4"
        ],
    },
    getSubcategories: function () {
        return this.subcategories;
    }
});

I've managed to send the variable successfuly to SomethingController.js this way(copied just parts of the necessary code below):

define(
 [
           "underscore",
           "base/Controller",
           "views/SomethingView",
           "collections/SomethingCollection",
           "helpers/Subcategories",
 ], 
 function(_, Controller, SomethingView, SomethingCollection, Subcategories) {
  var subcategory = null,
  
  var SomethingController = Controller.extend({
   show_results: function(collection, resp) {
    var data = { 
     subcategories: Subcategories.getSubcategories(),
    };
        ...

But when I try to import the variable in SomethingView.js, it only works if I use the entire json object again:

define(
 [
  "jquery",
  "backbone",
  "has/form",
  "has!input-attr-placeholder?:jqueryui/placeholder",
  "scripts/libs/jquery.tmpl.js",
  "helpers/Subcategories",
 ], 
 function( $, Backbone, viewTemplate, has, Subcategories) {
  
  var SomethingItemsView = Backbone.View.extend({
   el: $("#main-section"),
   template: viewTemplate,
   events: {
    "click #some_button" : "change_some_page",
   },
   something_items: function( event ) {
    event.preventDefault();
    var somethingCategory = $("#some_selector");
    var subcategories = {// entire json object
        }
        var somethingSubcategory =  subcategories[somethingCategory];
        ...

I've tried var subcategories = Subcategories.getSubcategories(), Subcategories.subcategories and all sorts of stuff. Wasted quite a bit of time for something so small. I'm stumped as to why it doesn't work and I don't want to have the whole object hard-coded there.

I'm making some changes to the front end of an existing website so note that I can't change the framework of any of those files, except maybe Subcategories.js.

Any opinion would be appreciated.

Answer 1

I think your problem is coming from the order of your dependencies:

[
        "jquery",
        "backbone",
        "has/form",
        "has!input-attr-placeholder?:jqueryui/placeholder",
        "scripts/libs/jquery.tmpl.js",
        "helpers/Subcategories",
    ], 
    function( $, Backbone, viewTemplate, has, Subcategories) {

It has to be in the same order.Subcategories is the sixth and last argument but you have only five inputs.

jquery => $
backbone => Backbone
has/form => viewTemplate
has!... => has
scripts/libs/jquery.tmpl.js => Subcategories
helpers/Subcategories => OUPS NOTHING O_O

Hope it helps