Cross referencing of 2 models

Question

I have 2 models which are cross referencing each other. This could look like this:

MainModel:

define(
    [ 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/EditModel' ],
    function (app, router, shell, editModel) {
        //...
        return {
            //...

            // This function should be accessible by the EditModel 
            update: function() {
                //...
            },

            showEditView: function() {
                // Initialise the EditModel with some data and show the according view afterwards
                editModel.init('set some important stuff here...');
                router.navigateTo('#/EditView');
            }
            //...
        };
    }
);

EditModel:

define(
    [ 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/MainModel' ],
    function (app, router, shell, mainModel) {
        //...
        return {
            //...

            // This function should be accessible by the MainModel 
            init: function() {
                //...
            },

            showMainView: function() {
                // Update the the MainModel with some data and show the according view afterwards
                mainModel.update('set new data here...');
                router.navigateTo('#/MainView');
            }
            //...
        };
    }
);

Unfortunately this is not working. If I load my page on the MainView and call showEditView, the variable editView is known and everything works fine but then the variable mainModel in the EditModel is undefined and therefore the call mainModel.update(...) fails. Same thing happens if I load my page on EditView but in the "opposite direction" (var mainModel in the EditModel is known, but editModel in the MainModel is undefined).

Is this a known issue and if so: How can i circumvent it?

I also posted this question in Durandals Google Group

Thanks

Answer 1

Check requierejs documentation for circular dependencies http://requirejs.org/docs/api.html#circular.

Circular dependencies are rare, and usually a sign that you might want to rethink the design. However, sometimes they are needed, and in that case, use require() as specified above.

For main.js add require as dependency and then explicitly require models/EditModel should do the trick. Either replicate that for the other modules or rethink the design ;-).

define(
    [ 'require', 'durandal/app', 'durandal/plugins/router', 'models/Shell', 'models/EditModel' ],
    function (require, app, router, shell, editModel) {
        //...
        return {
            //...

            // This function should be accessible by the EditModel 
            update: function() {
                //...
            },

            showEditView: function() {
                // Initialise the EditModel with some data and show the according view afterwards
                require('models/EditModel').init('set some important stuff here...');
                router.navigateTo('#/EditView');
            }
            //...
        };
    }
);