1
\$\begingroup\$

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>

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Yeah you are right. This i forgot to remove, because i changed from calling the the model and view directly to pubsub mechanism, i changed the code. C.messenger is just the namespace i forgot to mark as XX.namespace, modified my post \$\endgroup\$ – user28980 Aug 29 '13 at 6:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.