CODEWITHSUNDEEP
javascriptdesign-patternsmodel-view-controllermodulevisibility
András Szepesházi
András Szepesházi

Reputation: 6763

Javascript simple MVC + module pattern implementation

Here is a very basic attempt to create a "hello world"-like JS app using the module and MVC patterns.

var appModules = {};

appModules.exampleModul = (function () {

    var _data = ['foo', 'bar']; // private variable

    return {
        view: {
            display: function() {
                $('body').append(appModules.exampleModul.model.getAsString());
            },
        },
        model: {
            getAsString: function() {
                return _data.join(', ');
            },
        }

    };

})();

appModules.exampleModul.view.display();

This works fine, but I'm not happy how I have to reference the model function from the view, using the full object path: appModules.exampleModul.model.getAsString(). How can I expose the public model methods to the view, so I could simply use something like model.getAsString()? Or do I need to organize the code differently?

Upvotes: 2

Views: 1594

Answers (2)

YK1
YK1

Reputation: 7622

One option is you can convert those objects into private implementations.

appModules.exampleModul = (function() {

            var _data = ['foo', 'bar'];
            // private variable

            var _view = {
                    display : function() {
                        $('body').append(_model.getAsString());
                    },
            };

            var _model = {
                    getAsString : function() {
                        return _data.join(', ');
                    },
            };

            return {
                view : _view,
                model : _model
            };
})();

Upvotes: 2

benhowdle89
benhowdle89

Reputation: 37494

You could do something like this:

var appModules = {};

appModules.exampleModul = (function () {

    var _data = ['foo', 'bar']; // private variable

    return {
        view: {
            display: function() {
                $('body').append(this.model.getAsString());
            },
        },
        model: {
            getAsString: function() {
                return _data.join(', ');
            },
        }

    };

})();
var display = appModules.exampleModul.view.display.bind(appModules.exampleModul);
display();

Which isn't really the prettiest of solutions, but does offer a more generic solution inside the display function!

Upvotes: 1

Related Questions