Javascript MVC Design Feedback 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("&lt;li contact_name='" + contact.name + "'&gt;" + contact.name +"&lt;/li&gt;");
};

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




&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;      &lt;/script&gt;
&lt;script src="js/extlib/tinyPubSub.js"&gt;&lt;/script&gt;
&lt;script src="js/src/util/namespace.js"&gt;&lt;/script&gt;
&lt;script src="js/src/model/ContactModel.js"&gt;&lt;/script&gt;
&lt;script src="js/src/model/ContactListModel.js"&gt;&lt;/script&gt;
&lt;script src="js/src/view/ContactListView.js"&gt;&lt;/script&gt;
&lt;script src="js/src/controller/ContactListController.js"&gt;&lt;/script&gt;
&lt;script src="js/src/application.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
    &lt;body&gt;
              &lt;h2&gt;ContactList1&lt;/h2&gt;
    &lt;ul id="contactList"&gt;

    &lt;/ul&gt;
    &lt;h1&gt;Chat&lt;/h1&gt;
    &lt;div&gt;
        &lt;p&gt;
            &lt;input type="text" id="contactName"/&gt;
            &lt;input type="button" id="addContact" value="hinzufügen"&gt;
            &lt;input type="button" id="removeContact" value="entfernen"&gt;
        &lt;/p&gt;


        Message: &lt;input id="msg"  type="text" /&gt;
        &lt;textarea id="msgContainer"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
&lt;/body&gt;
Did you post the right code?

What is TC.messenger?

You pass two arguments in

XX.namespace.ContactListController = (function(contactListModel, view) 


and you save them as members, but never use them.