Question

I’m getting the error: NoMethodError: Method ‘go_start’ was not found on the controller

The function go_start is only in two places in my project (I searched):
StartRouter.js

define(['marionette'], function(Marionette) {
  'use strict';

  var StartRouter = {};

  StartRouter.Router = Marionette.AppRouter.extend({
    appRoutes: {
        "start": "go_start"
    }
  });

  return StartRouter;
});

And StartController.js

define(['underscore', 'marionette', 'app/vent',
    'text!templates/StartLayout.html',     'views/InspectorStartView','views/InspectorStartView'],
function(_, Marionette, vent, layout, InspectorStartView, PlayerStartView) {
'use strict';

// public module API
var Controller = {};

// private
var Layout = Marionette.Layout.extend({
    template: _.template(layout),

    regions: {
        inspector: "#inspector_choice",
        player: "#player_choice"
    }
});

// private
var _initializeLayout = function() {
    console.log('initializeLayout...');
    Controller.layout = new Layout();
    Controller.layout.on("show", function() {
        vent.trigger("layout:rendered");
    });
    vent.trigger('app:show', Controller.layout);
};

// controller attach a sub view/ search View
vent.on("layout:rendered", function() {
    console.log('layout:rendered =>StartController');

    // render views for the existing HTML in the template, and attach it to the layout (i.e. don't double render)
    var inspectorStartView = new InspectorStartView();
    Controller.layout.inspector.attachView(inspectorStartView);

    var playerStartView = new PlayerStartView();
    Controller.layout.player.attachView(playerStartView);
});

    // controller show inspector in the layout / subview
    vent.on('show:inspector', function(inspectorStartView) {
        // console.log('show books event');
        Controller.layout.inspector.show(inspectorStartView);
    });

    // controller show inspector in the layout / subview
    vent.on('show:player', function(playerStartView) {
        // console.log('show books event');
        Controller.layout.inspector.show(playerStartView);
    });


// public API
Controller.go_start = function(term) {   **//<-- function go_start**
    _initializeLayout();
    //vent.trigger("search:term", term);
};

return Controller;

The really strange part is that Crome shows the error happening on line 77 of App.js which is:

app.addInitializer(function(options) {
    // configure for loading templates stored externally...
    Backbone.Marionette.TemplateCache.prototype.loadTemplate = function(templateId) {
        // Marionette expects "templateId" to be the ID of a DOM element.
        // But with RequireJS, templateId is actually the full text of the template.
        var template = templateId;

        // Make sure we have a template before trying to compile it
        if (!template || template.length === 0) {
            var msg = "Could not find template: '" + templateId + "'";
            var err = new Error(msg);
            err.name = "NoTemplateError";
            throw err;
        }

        return template;
    };

    // Connect controllers to its router via options
    // init router's router/controller
    new options.router.Router({
        controller: options.homeController
    });

    // init loginRouter's router/controller
    new options.loginRouter.Router({
        controller: options.loginController
    });
    // init helpRouter's router/controller
    new options.helpRouter.Router({
        controller: options.helpController  //<-- Line 77
    });
    // init startRouter's router/controller
    new options.startRouter.Router({
        controller: options.startController
    });
    // init inspectorRouter's router/controller
    new options.inspectorController.Router({
        controller: options.inspectorController
    });
    // init playerRouter's router/controller
    new options.playerRouter.Router({
        controller: options.playerController
    });
});
// export the app
return app;
});

The Help router and controller:

// HelpRouter.js
define(['marionette'], function(Marionette) {
'use strict';

var HelpRouter = {};

HelpRouter.Router = Marionette.AppRouter.extend({
    appRoutes: {
        "help": "go_help"
    }
});

return HelpRouter;
});

<!-- routes/HelpController.js -->
define(['underscore', 'marionette', 'app/vent',     'text!templates/HelpLayout.html'],
function (_, Marionette, vent, layout) {
    'use strict';

    // public module API
    var Controller = {};

    // private
    var Layout = Marionette.Layout.extend({
        template: _.template(layout),

        regions: {
            faq: "#"
        }
    });

// private

var _initializeLayout = function () {
console.log('initializeLayout...');
Controller.layout = new Layout();
Controller.layout.on("show", function () {
    vent.trigger("layout:rendered");
});
vent.trigger('app:show', Controller.layout);
};


// public API

Controller.go_help = function () {
     _initializeLayout();
};

return Controller;
});

Anyone see what I’m doing wrong?
Here is something that I didn’t think was supposed to happen:

// Includes Desktop Specific JavaScript files here (or inside of your Desktop router)
require(["app/App",
    "routers/HomeController",       "routers/StartController",  "routers/LoginController",
    "routers/InspectorController",  "routers/PlayerController", "routers/HelpController",
    "routers/DesktopRouter",        "routers/LoginRouter",      "routers/StartRouter",
    "routers/InspectorController",  "routers/PlayerController", "routers/HelpRouter" ],
function(App,
       HomeController, StartController, LoginController, InspectorController, PlayerController, HelpController,
       DesktopRouter, LoginRouter, HelpRouter, StartRouter, InspectorRouter, PlayerRouter) {

  var options = {
      homeController:       HomeController,
      startController:      StartController,
      loginController:      LoginController,
      helpController:       HelpController,

      inspectorController:  InspectorController,
      playerController:     PlayerController,

      router:               DesktopRouter,
      startRouter:          StartRouter,
      loginRouter:          LoginRouter,
      helpRouter:           HelpRouter,

      inspectorRouter:      InspectorRouter,
      playerRouter:         PlayerRouter

  };

  App.start(options);
});

So I am requiring all my routers and controllers but when I run that code in the debugger I have some items that are undefined:

options: Object
helpController: Object
helpRouter: Object
homeController: Object
go_home: function () {
__proto__: Object
inspectorController: undefined
inspectorRouter: undefined
loginController: Object
loginRouter: Object
playerController: undefined
playerRouter: Object
router: Object
Router: function (){ parent.apply(this, arguments); }
__proto__: Object
startController: Object
go_start: function (term) {
__proto__: Object
startRouter: undefined
__proto__: Object
HomeController: Object
StartController: Object
StartRouter: undefined
DesktopRouter: Object
InspectorController: undefined

Why are some undefined? The StartRouter and StartController have the go_start function. The HelpRouter/Controller doesn’t and shouldn’t have go_start but it is throwing an error

All suggestions welcome.

Andrew

Answer 1

Looks like your RequireJS imports are out of order. The HelpRouter variable maps to the "routers/StartRouter" module, and all subsequent modules are off-by-one.

The AMD import format can easily lead to this types of simple errors that can take ages to debug, because that’s somehow the place you never think to look. That’s why I prefer the simplified CommonJS wrapper syntax provided by RequireJS:

define(function(require) {
  var HomeController  = require('routers/HomeController'),
      StartController = require('routers/StartController'),
      //etc...
});