Jessica's Trader

build/index.html

@@ -23,11 +23,11 @@ <h1>Ada Trader</h1>
       <li class="large-4 small-12 columns">
         <div class="quote">
           <div class="row">
-            <h3 class="symbol large-6 small-6 columns"><%- symbol %></h3>
+            <h3 class="symbol large-6 small-6 columns"><%- quote.symbol %></h3>
             <div class="large-6 small-6 columns">
-              <h4 class="price">$<%- price.toFixed(2) %></h4>
-              <button class="btn-sell tiny alert button">Buy</button>
-              <button class="btn-buy tiny success button">Sell</button>
+              <h4 class="price">$<%- quote.price.toFixed(2) %></h4>
+              <button class="btn-sell tiny alert button">Sell</button>
+              <button class="btn-buy tiny success button">Buy</button>
             </div>
           </div>
         </div>

src/app.js

@@ -1,6 +1,20 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import ApplicationView from 'app/views/application_view';
+import QuoteView from 'app/views/quote_view';
+
+var quoteData = [
+  {
+    symbol: 'HUMOR',
+    price: 100.00
+  }, {
+    symbol: 'CLOTH',
+    price: 70.00
+  }, {
+    symbol: 'ROCK',
+    price: 30.00
+  }
+];
 
 const simulate = function(quote) {
   // Calculate a random price movement
@@ -18,13 +32,15 @@ const simulate = function(quote) {
 };
 
 $(document).ready(function() {
+
   var appView = new ApplicationView({
-    el: '#application'
+    el: $('#application'),
+    quoteData: quoteData
   });
 
   appView.render();
 
-  setInterval(function() {
-    // Call simulate() on each quote in the ApplicationView
-  }, 1000);
+  // setInterval(function() {
+  //   // Call simulate() on each quote in the ApplicationView
+  // }, 1000);
 });

src/app/views/application_view.js

@@ -1,14 +1,37 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import _ from 'underscore';
+import QuoteView from 'app/views/quote_view';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
+  initialize: function(options) {
+    this.quoteData = options.quoteData;
+
+    this.quoteTemplate = _.template($('#tmpl-quote-view').html());
+
+    this.listElement = this.$('.quotes');
+
+    this.cardList = [];
+    this.quoteData.forEach(function(quote) {
+      var card = new QuoteView({
+        quote: quote,
+        template: this.quoteTemplate
+      });
+      this.cardList.push(card);
+    }, this);
   },
 
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    this.listElement.empty();
+    this.cardList.forEach(function(card) {
+      card.render();
+
+      this.listElement.append(card.$el);
+    }, this);
 
     return this;
-  }
+  },
+
 });
 
 export default ApplicationView;

src/app/views/quote_view.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import Backbone from 'backbone';
+import _ from 'underscore';
+
+var QuoteView = Backbone.View.extend({
+  initialize: function(options) {
+    this.quote = options.quote;
+    this.template = options.template;
+  },
+
+  render: function() {
+    var html = this.template({quote: this.quote});
+    this.$el.html(html);
+
+    return this;
+  },
+
+  events: {
+  'click .btn-sell': 'sellStock',
+  'click .btn-buy': 'buyStock'
+  },
+
+  sellStock: function(event) {
+    this.quote.price -= 1;
+    this.render();
+
+  },
+
+  buyStock: function(event) {
+    this.quote.price += 1;
+    this.render();
+  }
+
+});
+
+export default QuoteView;