I would like to share my design of mvc via js.
What do you think about it? I tried to not use any mvc framework but i want to get clear structure and a decoupled organisation.
Next step for me is evaluating something like require.js to get rid of the ordering within the index file
The code:
XX.namespace.ContactListController = (function() {
var _initListener = function() {
$(document).ready(function() {
$("#addContact").click(function() {
var contactName = $("#contactName").attr('value');
var contact = new XX.namespace.ContactModel(contactName);
$.publish("add#contact", contact);
});
$("#removeContact").click(function() {
var contactName = $("#contactName").attr('value');
var contact = new XX.namespace.ContactModel(contactName);
$.publish("remove#contact", contact);
});
});
};
var interface = {
init: function() {
_initListener();
}
};
return interface;
})(XX.namespace.ContactListModel, XX.namespace.ContactListView);
XX.namespace.ContactListModel = (function() {
var contactList = [];
/**
* @private
*/
var _addContact = function(channel, contact) {
contactList.push(contact);
};
var _removeContact = function(channel, contact) {
var index = contactList.indexOf(contact);
contactList.splice(index, 1);
};
/**
* API
*/
$(document).ready(function() {
$.subscribe("add#contact", _addContact);
$.subscribe("remove#contact", _removeContact);
})
})();
XX.namespace.ContactModel = function x(name) {
this.name = name;
};
XX.namespace.ContactListView = (function(){
var uiComponents = {
contactList: "#contactList"
};
var _addContact = function(channel, contact) {
$(uiComponents.contactList).append("<li contact_name='" + contact.name + "'>" + contact.name +"</li>");
};
var _removeContact = function(channel, contact) {
$(uiComponents.contactList+" li[contact_name='" + contact.name+ "']").remove();
};
/**
* API
*/
$(document).ready(function() {
$.subscribe("add#contact", _addContact);
$.subscribe("remove#contact", _removeContact);
})
})();
(function() {
XX.namespace.ContactListController.init();
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script src="js/extlib/tinyPubSub.js"></script>
<script src="js/src/util/namespace.js"></script>
<script src="js/src/model/ContactModel.js"></script>
<script src="js/src/model/ContactListModel.js"></script>
<script src="js/src/view/ContactListView.js"></script>
<script src="js/src/controller/ContactListController.js"></script>
<script src="js/src/application.js"></script>
</head>
<body>
<h2>ContactList1</h2>
<ul id="contactList">
</ul>
<h1>Chat</h1>
<div>
<p>
<input type="text" id="contactName"/>
<input type="button" id="addContact" value="hinzufügen">
<input type="button" id="removeContact" value="entfernen">
</p>
Message: <input id="msg" type="text" />
<textarea id="msgContainer"></textarea>
</div>
</body>
