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

<script type="text/x-handlebars-template" class="tmpl-app">
  <div class="cols">
    <div class="js-one">
      <b>List 1</b>
    </div>
    <div class="js-two">
      <b>List 2</b>
    </div>
  </div>
  <button class="js-add-list">Add new list</button>
  <button class="js-add-data">Add new data</button>
  <button class="js-add-model">Add model</button>
</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 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);

    var appView = new App.V.AppView();
    $('body').html(appView.render().el);
  }
};

// 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) {
    console.log('addToCollection', response);
    this.add(response);
    console.log(this);
  }
});

App.V.AppView = Backbone.View.extend({
  events: {
    'click .js-add-list': 'createViewTwo',
    'click .js-add-data': 'triggerDataUpdate',
    'click .js-add-model': 'triggerNewModel'
  },

  template: Handlebars.compile($('.tmpl-app').html()),

  render: function() {
    this.$el.html(this.template());

    setTimeout(this.onRender.bind(this), 0);

    return this;
  },

  onRender: function() {
    this.createViewOne();
  },

  createViewOne: function() {
    this.stocksOne = new App.C.StocksCollection(stockDataOne);

    var stocksViewOne = new App.V.StocksCollectionView({
      collection: this.stocksOne
    });

    this.$('.js-one').append(stocksViewOne.render().el);
  },

  createViewTwo: function() {
    var stocksViewTwo = new App.V.StocksCollectionView({
      collection: this.stocksOne
    });

    this.$('.js-two').append(stocksViewTwo.render().el);
  },

 ...