Separating View & Controller logic in Javascript objects

Question

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:

VIEW to CONTROLLER when user interacts with the DOM e.g. clicks a button
CONTROLLER to VIEW when server sends an update to be displayed in DOM e.g. new chat message

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);
    }
}

This is a really vague question and it's unclear which javascript in your example is client-side vs. server-side... could you clarify? — Jesse Fulton, Sep 26 '12 at 05:46
There is no server side code. I'm only concerned with the client side seperation of the: socket.io code from my Dom manipulation jQuery. — AndrewMcLagan, Sep 26 '12 at 07:12
So essentially the socket.io and application logic in "socketController" needs to communicate updates sent from the server to the "jqueryView" object that updates the DOM. Then when the other use case happens: a user interacts with the DOM the "jqueryView" object needs to communicate changes to the "socketContoller" object so it can send the data to the server. Thus seperating Dom manipulation from application logic... I hope that's clearer — AndrewMcLagan, Sep 26 '12 at 07:17
I just struggle with how to represent this two way communication. — AndrewMcLagan, Sep 26 '12 at 07:22

score 1 · Accepted Answer · answered Sep 26 '12 at 08:36

1

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.

answered Sep 26 '12 at 08:36

Hasith

1,749
20
26

This looks good, two way data binding is a pattern I was unaware of. As this app I'm writing (node.js / socket.io) is purely for education purposes I want to steer clear of libraries (I also detest the amount of js libraries and community fragmentation it creates) . If anyone could steer me in the direction of creating two way object data binding (without libs) that would be great!? – AndrewMcLagan Sep 26 '12 at 19:42
check this: http://jsfiddle.net/bpH6Z/4/ ... Found it at: http://stackoverflow.com/questions/11904039/plain-javascript-bidirectional-data-binding – Hasith Sep 27 '12 at 00:07
BTW.. this is just minimal databinding and cannot be compared to the power of KnockoutJS, AngularJS type of libraries. Since you are doing this for educational purposes, also have a look at http://boilerplatejs.org that describes a reference architecture for JS only frontends. – Hasith Sep 27 '12 at 00:16

score 0 · Answer 2 · answered Oct 05 '12 at 05:03

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!!

Separating View & Controller logic in Javascript objects

2 Answers2