DOMの操作と相互作用(jQuery)を分離したいので、これをVIEWと呼び、クライアント側のアプリケーションロジック(socket.io)からこれをコントローラーと呼びます。通信は双方向である必要があります。
- ユーザーがDOMを操作するとき(ボタンをクリックするなど)にコントローラーに表示
- サーバーがDOMに表示される更新を送信したときに表示するコントローラー(新しいチャットメッセージなど)
これら2つのJavaScriptオブジェクト間の通信に問題があります。どうすれば効率的な方法で2つの間で通信できますか?以下の簡単な例。
// 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);
}
}