YUI3, Modules, Namespaces, calling functions

Question

I would like to port the javascript code from my page to YUI3. After reading many posts (questions and answers) here and lots of information in the YUI3 page and in tutorials I have come to the conclusion that the best way to do it is by splitting the code in modules, because it allows me to load scripts dinamically only when needed.

I would like to organize the code in different submodules which should be loaded and managed (if needed) by a core module.

I think I have understood how to dinamically load them, but the problem I have now is that I am not always able to call the public methods both within a module and form one module to another. Sometimes it works, but sometimes I get the message xxx is not a function.

Probably the question is I don't understand how to set a global namespace (for example MyApp) and "play" within that namespace.

I would like to be able to call methods the following way: MyApp.Tabs.detectTabs()... both from the methods of the main module (MyApp.Core) and from the same submodule (MyApp.Tabs).

Here is the structure of my code:

Inline javascript:

var MyAppConfig = {
  "tabpanels":{"ids":["navigation"]},
  "events":   [{"ids": ["main_login", "dictionary_login"],
              "type": "click",
              "callback": "MyApp.Core.updateContent",
              "params":{
                 }
              }]
};
YUI_config = {
    filter: 'debug',
    groups: {
        'myapp': {
            modules: {
                'project-myapp-core': {
                    fullpath: 'http://www.myapp.com/scripts/Core.js',
                    requires: ['node-base']
                },
                'project-myapp-tabs': {
                    fullpath: 'http://www.myapp.com/scripts/Tabs.js',
                    requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base']
                }
            }
        }
    }
};
YUI(YUI_config).use('node', 'base', 'project-myapp-core', function(Y) {
    var MyApp = {};
    MyApp.Core = new Y.MyApp.Core();
    Y.on('domready', MyApp.Core.begin, Y, null, application);
});

Module: Core
File: http://www.myapp.com/scripts/Core.js

YUI.add('project-myapp-core', function(Y) {

    function Core(config) {
        Core.superclass.constructor.apply(this, arguments);
    }
    Core.NAME = 'myapp-core';
    Core.ATTRS = {};

    var MyApp;
    MyApp = {};

    Y.extend(Core, Y.Base, {

        initializer: function (cfg) {
        },

        begin: function(e, MyAppConfig) {
            MyApp.Core      = instance = this;
            if (MyAppConfig.tabpanels) {
                YUI().use('node', 'project-myapp-tabs', function(Y) {
                    MyApp.Tabs = new Y.MyApp.Tabs();
                });
            }
            if (MyAppConfig.events) {
                MyApp.Core.prepareEvents(MyAppConfig.events);
                // I get "MyApp.Core.prepareEvents is not a function" 
            }
        },

        prepareEvents: function(e) {
        },

        updateContent: function() {
        }

    });

    Y.namespace('MyApp');
    Y.MyApp.Core = Core;

}, '0.0.1', { requires: ['node-base'] });

Submodule: Tabs
File: http://www.myapp.com/scripts/Tabs.js

YUI.add('project-myapp-tabs', function(Y) {

    function Tabs(config) {
        Tabs.superclass.constructor.apply(this, arguments);
    }
    Tabs.NAME = 'myapp-tabs';
    Tabs.ATTRS = {};

    var tabView = [];

    Y.extend(Tabs, Y.Base, {

        initializer: function (cfg) {
        },

        begin: function (tabpanels) {
        },

        methodA: function () {
        }

    });

    Y.namespace('MyApp');
    Y.MyApp.Tabs = Tabs;

}, '0.0.1', { requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base'] });

Where should I define the global variables, the namespace...? How should I call the functions?

Thanks in advance!

-- Oriol --

Answer 1

Since nothing depends on project-myapps-tabs, YUI doesn't include it. Try this in your inline JS:

YUI(YUI_config).use('node', 'base', 'project-myapp-tabs', function(Y) {