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