0

There is simple messaging app written in Ember.js. Have a look at it at this fiddle (no CSS, sorry).

/**************************
       * Application
       **************************/
App = Ember.Application.create({
  //rootElement: '#app_body'
});


/**************************
       * Models
       **************************/

App.Person = Ember.Object.extend({
  id: null,
  name: null,
  avatar: null,
  jid: null
})

App.Contact = App.Person.extend({
  isOnline : false
});

App.Message = Ember.Object.extend({
  from : null,
  //    to : null,
  text : null
  //    time : null
});



/**************************
       * Views
       **************************/


App.ApplicationView = Ember.View.extend({
  templateName:'application'
});

App.ContactListView = Ember.View.extend({
  templateName: 'contact-list'
});

App.ContactView = Ember.View.extend({
  templateName: 'contact'
});

App.TextView = Ember.View.extend({
  templateName : 'text',
  newMessage : '',
  messages : [],

  submit: function(event) {
    var message_body = this.get('newMessage')
    var message = App.Message.create({
      from : App.me.name,
      to : null,
      text : message_body,
      time : null
    });
    this.get('messages').pushObject(message);
  }
});

App.ConversationView = Ember.View.extend({
  templateName: 'conversation'
});

/**************************
       * Controllers
       **************************/
App.contactsController = Ember.ArrayController.create({

  content:[],

  pair:function () {
    content = this.get('content');
    var result = [];
    for (ii = 0; ii < content.length; ii += 2) {
      result.pushObject({
        "first":content[ii],
        "second":content[ii + 1] ? content[ii + 1] : null
      });
    }
    return result;
  }.property('content.@each')
});

// Define the main application controller. This is automatically picked up by
// the application and initialized.
App.ApplicationController = Ember.Controller.extend();

App.ConversationController = Ember.ObjectController.extend();
App.TextController = Ember.ObjectController.extend();


/**************************
       * Router
       **************************/
App.Router = Ember.Router.extend({

  enableLogging: true,

  root: Ember.Route.extend({

    goToContactList : Ember.State.transitionTo('contacts'),
    goToConversation : Ember.State.transitionTo('conversation.text'),

    index : Ember.Route.extend({
      route:'/',
      redirectsTo:"contacts"
    }),

    contacts : Ember.Route.extend({
      route:'/contacts',
      connectOutlets:function (router) {
        router.get('applicationController').connectOutlet('contactList'); // leads to ContactListView
      }
    }),

    conversation : Ember.Route.extend({

      route:'/conversation/:contact_id',
      //            modelClass: 'App.Contact',

      connectOutlets:function (router, contact) {
        // binds current contact to the conversationController so the text/video view can access it
        router.get('applicationController').connectOutlet('conversation', contact);
      },

      deserialize:function (router, params) {
        return App.contactsController.find(function(item) {
          return item.id == params.contact_id;
        });
      },

      serialize:function (router, context) {
        return context ? { contact_id : context.get('id') } : {};
      },

      index : Ember.Route.extend({
        route:'/',
        redirectsTo:"text"
      }),

      text : Ember.Route.extend({
        route:'/text',
        connectOutlets:function (router) {
          var conversationController = router.get('conversationController'),
              contact = conversationController.get('content');
          console.log(contact);
          conversationController.connectOutlet('text', contact);
        }

      })
    })
  })
});


/**************************
       * Data initialization
       **************************/

me = {"id" : 123, "name" : "Pavel"};
contacts = [
  {
    "id" : 1, 
    "name" : "Barrack Obama", 
    "avatar" : "http://www.barackobama.net/pictures/barack-obama-2.jpg"
  },
  {
    "id" : 2, 
    "name" : "Yehuda Katz", 
    "avatar" : "http://static.jquery.com/events/2011/boston/assets/images/avatars/yehuda-katz.jpg"
  }
];

// variables "me" and "contacts" are passed from the view as plain JS object
$.each(contacts, function(index, contact){
  App.contactsController.pushObject(App.Contact.create({
    "id" : contact.id,
    "name" : contact.name,
    "avatar" : contact.avatar
  }));
});

App.me = App.Person.create({
  "id" : me.id,
  "name" : me.name
});

$(function() {
  App.initialize();
});

You can choose from the various contacts and send them messages. Each contact should have its own "message queue".

However, in the current situation, all messages are mixed together. I tried to split them according to the context but I don't know why. Is such thing possible when Ember.js does all the routing and view/controller instantiating for you? Where should the messages be stored?

EDIT: To make it clear. I want the messages to persist but I'd like to separate the stream for each contact.

1
  • 1
    1000th ember.js question! Some sort of celebration seems to be called for
    – dechov
    Aug 16, 2012 at 16:08

1 Answer 1

1

Based on what you said Each contact should have its own "message queue"., I've stored the messages in the contact itself. As the views are instanciated each time connectOutlet() is called, you have to persist the data in the models.

In your situation, the messages where mixed beacause you felt into an ember gotcha. Indeed, when you are extending a class, and declare a property as an empty array, this array will be shared between all instances. The good way to do this, is to initialize the empty array in the init() method.

Here is my resulting jsfiddle, I hope this helps

http://jsfiddle.net/Sly7/9jCL9/

2
  • Thanks, you helped me a lot! I have one additional issue related to this example. When I receive message (for example from Yehuda), I need to dispatch it according to the sender -> put it into Yehuda's queue. Can I query somehow App.TextController.find(WHERE name == ...)?
    – Pavel S.
    Aug 16, 2012 at 22:13
  • Perhaps docs.emberjs.com/… would help you
    – sly7_7
    Aug 17, 2012 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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