Component Comment System from Real-time Chat

by donejs

HTML

<script src="http://canjs.com/release/2.0.4/can.jquery.js"></script>
<script type="text/mustache" id="app-template">
    <chat></chat>
</script>

<div id="my-app"></div>

<script src='http://agile-everglades-1937.herokuapp.com/socket.io/socket.io.js'></script>

CSS

input {
    box-sizing: border-box;
    width: 100%;
}
#messages {
  position: fixed;
  left: 0; right: 0;
  top: 0; bottom: 24px;
  overflow: auto;
}
#create-message {
  position: fixed;
  left: 0; right: 0;
  bottom: 0px;
}
li {
    border-top: 1px solid #eee;
    padding: 5px;
}
li:last-child {
    border-bottom: 1px solid #eee;
}
li:nth-child(odd) {
    background-color: #fcfcf1;
}

JavaScript

var myServerUrl = "http://agile-everglades-1937.herokuapp.com";

// define our message model
var Message = can.Model({
    findAll : 'GET ' + myServerUrl + '/messages',
    create : function(attrs) {
        $.post(myServerUrl + '/messages', attrs)
        //keep '{Message} created' from firing twice
        return $.Deferred()
    }
},{});

can.Component.extend({
    tag: 'chat',
    template: '<ul id="messages">' +
                '{{#each messages}}' +
                '<li>{{body}}</li>' +
                '{{/each}}' +
              '</ul>' +
              '<form id="create-message" action="" can-submit="submitMessage">' +
                  '<input type="text" id="body" placeholder="type message here..." can-value="newMessage" />' +
              '</form>',
    scope: {    
        Message: Message,
        messages: new Message.List({}),
        submitMessage: function(el, ev, ev2){
            ev2.preventDefault();
            new Message({body: this.attr("newMessage")}).save();
            this.attr("newMessage", "");
        }
    },
    events: {
        '{Message} created': function(construct, ev, message){
            this.scope.attr('messages').push(message);
        }
    }
});

var frag = can.view('app-template', {});
$('#my-app').html(frag);

// connect using Socket.io
var socket = io.connect(myServerUrl)
// listen for 'message-created' event to create a Message instance
// Note: the 'created' event IS triggered on this model instance. 
socket.on('message-created', function(message){
	new Message(message).created();
})