BB: Messenger Application

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="chat  js-chat">
    
    <div class="messages  js-messages"></div>
    
    <form class="js-message-form">
        <textarea class="js-input--message"></textarea>
        <input type="submit" class="js-action--send-message">
    </form>
    
</div>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

// Create a Message Model
var Message = Backbone.Model.extend();

// Create a Messages Collection
var Messages = Backbone.Collection.extend({
	model: Message
});

var MessagesView = Backbone.View.extend({
	render: function() {
    	this.collection.each(this.addMessage, this);
        
        return this;
    },
    
    addMessage: function(message) {
    	var messageView = new MessageView({
        	model: message
        });
        
        this.$el.append(messageView.render().el);
    }
});

var MessageView = Backbone.View.extend({
	template: Handlebars.compile('<h1></h1>'),
	render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});
// Create a Messages View
	// --> Access to the messages collection

// Create Message Form View
	// --> Access to messages collection
    // --> this.collection.create({
    	// id: 1,
        // message: 'Whatever
    // })