CODEWITHSUNDEEP
javascriptjquerymodel-view-controllernode.jssocket.io
AndrewMcLagan
AndrewMcLagan

Reputation: 13987

Separating View & Controller logic in Javascript objects

Im wanting to separate the DOM manipulation and interaction (jQuery) lets call this the VIEW from my client side application logic (socket.io) lets call this the controller. The communication needs to be two way:

I'm having trouble communicating between these two JavaScript objects. How do i communicate between the two in a efficient way?? simple example below. 

// CONTROLLER LOGIC (socket.io stuff)
function socketController() {}

socketController.prototype = {

    constructor: function() {

        // define socket listners
    this.socket.on('chatMessage', this.chatUpdate.bind(this));
    }

    chatUpdate: function(data) {

        // somehow call a "render" function on the "view" object
        // this.view.renderChatDOM(data.username, data.message);
    }
}

// VIEW LOGIC (jQuery stuff)
function jqueryView() {}

jqueryView.prototype = {

    onDOMReady: function() {

        // bind event handlers
        $('#send-message').bind('click', this.sendMessage.bind(this));          
    }

    sendMessage: function(event) {

            // manipulate DOM
        var $messageNode = $('#message-input'),
                $buttonNode = $('#send-message'),
                message = $messageNode.val();

            $messageNode.val(''); // clear input

            // somehow call the socketController and send data
            // this.socketController.chatSend(message);
    }
}

Upvotes: 0

Views: 694

Answers (2)

AndrewMcLagan
AndrewMcLagan

Reputation: 13987

So in the end Hasith was right. I was indeed looking for a MVC framework in javascript. I have decided to go with backbone.js as it is the least intrusive as far as size, learning curve and resources are concerned.

this solves my problem of seperating application logic (MODEL) from DOM manipulation and presentation (VIEW).

Go backbone.js!!

Upvotes: 0

Hasith
Hasith

Reputation: 1767

Why dont you have a look at a DOM manipulation library that provides two way data binding from the view to controller (or viewmodel). Then you wont have to manage the manual updates, but just change your client side model (or client view) where the framework will take care of keeping layers in sync. http://knockoutjs.com might be a good place to have a look at.

Upvotes: 1

Related Questions