Is this MVC in javascript?

Question

Despite I have been using MVC in PHP many times, I found out that it is quite different in Javascript. I'm reading MVC in Javascript over the web, but many of them have a different implementation. I came up with a simple MVC, but I think this is not correct. Is this acceptable or completely wrong?

var AppView = View.extend({

    init: function()
    {

        // listen to Model changes
        this.listen("counterChanged", $.proxy( this.updateCounter, this ));

        // assign click event; call controller method
        this.container.find("#increase").click( this.callback( this.Controller, "increase" ));
        this.container.find("#decrease").click( this.callback( this.Controller, "decrease" ));
    },


    updateCounter: function( evtData )
    {
        this.container.find("#counter").html( evtData.newValue );
    }

});

var AppController = Controller.extend({

    increase: function()
    {
        this.Model.update("counter", this.Model.get('counter') + 1 );

    },

    decrease: function()
    {
        this.Model.update("counter", this.Model.get('counter') - 1 );

    }

});


var AppModel = Model.extend({


    onUpdate_counter: function( newValue )
    {
        this.fireEvent("counterChanged",{
            newValue: newValue
        })
    }

});




var App = {}

$(document).ready(function(){

    App.Model = new AppModel({
        counter: 0
    });
    App.Controller = new AppController( App.Model );
    App.View = new AppView("#app", App.Controller );    

    App.Model.setView( App.View );

});

HTML:

<div id='app'>

    <div id='counter'>0</div>

    <a id='increase'>Increae</a>
    <a id='decrease'>Decrease</a>

</div>

View listens to changes in the model and assigns events to html anchors. View calls the controller when the anchors are clicked then controller updates the model.

clyfe · Accepted Answer · 2012-01-15 11:27:44Z

2

This is classic 1979-type MVC:

controller updates models
models update views via listeners

PHP/Rails (web request/response in general) is a slightly different type of MVC (constricted by the request/response nature of the web):

controllers update models
controllers take data from models and send it to views

In both types, view events trigger controller actions.

edited Jan 15, 2012 at 11:27

answered Jan 15, 2012 at 11:12

clyfe

23.8k8 gold badges88 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moon Over a year ago

clyfe // in your opinion, which is better in Javascript environment? I used PHP style MVC in one of my projects, but my manager pointed out that my controller is coupled with view.

clyfe Over a year ago

In client side js the classic model has more benefits. There are endeavors to also use the classic model server-side via server-push (web sockets, comet) technology. The classic model is better (less coupling, less boilerplate) in general. Model-2 is only a result of request/response web nature constriction.

Collectives™ on Stack Overflow

Is this MVC in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related