BB: Sockets and Collections

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="cols">
    <div class="js-one">
        <b>Stocks 1</b>
    </div>
    <div class="js-two">
        <b>Stocks 2</b>
    </div>
</div>

<script type="text/x-handlebars-template" class="tmpl-stock">
    <p>{{symbol}}</p>
    <p>{{open}}</p>
</script>

SCSS

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

body {
    padding: 5%;
}

.cols {
    display: flex;
    justify-content: space-around;
}

li {
    margin: 10px 0;
}

JavaScript

console.clear();

var stockDataOne = [
    {symbol: "GM", open: 38.87},
    {symbol: "GE", open: 25.40},
    {symbol: "MCD", open: 97.05}
];
var stockDataTwo = [
    {symbol: "UAL", open: 69.45},
    {symbol: "WMT", open: 83.24},
    {symbol: "AAL", open: 55.76},
];
var updatedResponse = [
    {symbol: "LLY", open: 76.12},
    {symbol: "JPM", open: 61.75},
    {symbol: "BAC", open: 15.84},
    {symbol: "BA", open: 154.50}
];

var App = {
	M:{}, V:{}, C:{},
    
	start: function() {
    
    	_.extend(this, Backbone.Events);
    	
        // Stocks One.
        var stocksOne = new App.C.StocksCollection(stockDataOne);
        var stocksViewOne = new App.V.StocksCollectionView({
            collection: stocksOne
        });
        
        // Stocks Two.
        var stocksTwo = new App.C.StocksCollection(stockDataOne);
        var stocksViewTwo = new App.V.StocksCollectionView({
            collection: stocksTwo
        });
		
        // Append.
        $('.js-one').append(stocksViewOne.render().el);
        $('.js-two').append(stocksViewTwo.render().el);
        
        
        // Example socket output with new data for Stock View One 
        setTimeout(function() {
        	Backbone.Events.trigger('collection:data:published', updatedResponse);
        }, 4000);
        
        setTimeout(function() {
        	Backbone.Events.trigger('collection:model:published', {symbol: "KAH", open: 123.45})
        }, 7000);
    }
};

// Classes
App.M.StockModel = Backbone.Model.extend();

App.C.StocksCollection = Backbone.Collection.extend({

    model: App.M.StockModel,
    
    initialize: function() {
        this.listenTo(Backbone.Events, 'collection:data:published', this.setCollection, this);
        this.listenTo(Backbone.Events, 'collection:model:published', this.addToCollection, this);
    },

    setCollection: function(response) {
        this.reset(response, {
            parse: true
        });
    },
    
    addToCollection: function(response) {
   ...