lauren brink

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-buy tiny alert button">Buy</button>
+              <button class="btn-sell tiny success button">Sell</button>
             </div>
           </div>
         </div>

src/app.js

@@ -1,30 +1,48 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import ApplicationView from 'app/views/application_view';
+import QuoteView from 'app/views/quote_view';
 
-const simulate = function(quote) {
-  // Calculate a random price movement
-  const maxChange = 1.00;
-  const minChange = 0.00;
-  var change = _.random(minChange * 10, maxChange * 10) / 10;
+var stockData = [
+ {
+   symbol: 'HUMOR',
+   price: 8850
+ }, {
+   symbol: 'CLOTH',
+   price: 8170
+ }, {
+   symbol: 'HABIT',
+   price: 9800
+ }, {
+   symbol: 'SUPER',
+   price: 8310
+ }
+];
+//
+// const simulate = function(quote) {
+//   // Calculate a random price movement
+//   const maxChange = 1.00;
+//   const minChange = 0.00;
+//   var change = _.random(minChange * 10, maxChange * 10) / 10;
+//
+//   // Decide if the change is positive or negative
+//   if(_.random(0,1) === 1) {
+//     change *= -1;
+//   }
 
-  // Decide if the change is positive or negative
-  if(_.random(0,1) === 1) {
-    change *= -1;
-  }
-
-  // Actually trigger the change
-  quote.trigger('change:price', change);
-};
+//   // Actually trigger the change
+//   quote.trigger('change:price', change);
+// };
 
 $(document).ready(function() {
   var appView = new ApplicationView({
-    el: '#application'
+    el: $('#application'),
+    quote: stockData
   });
 
   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,48 @@
+import _ from 'underscore';
+import $ from 'jquery';
+import QuoteView from 'app/views/quote_view';
 import Backbone from 'backbone';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
-  },
+  initialize: function(options) {
+
+    // Store a the full list of tasks
+    this.quoteData = options.quote;
+
+    // Compile a template to be shared between the individual tasks
+    this.quoteTemplate = _.template($('#tmpl-quote-view').html());
+
+    // Keep track of the <ul> element
+    this.listElement = this.$('.quotes');
+
+    // Create a QuoteView for each task
+    this.quoteList = [];
+    this.quoteData.forEach(function(quote) {
+      var quote = new QuoteView({
+        quote: quote,
+        template: this.quoteTemplate
+      });
+      this.quoteList.push(quote);
+    }, this); // bind `this` so it's available inside forEach
+  }, // end of init fx
 
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    // Make sure the list in the DOM is empty
+    // before we start appending items
+    this.listElement.empty();
+
+    // Loop through the data assigned to this view
+    this.quoteList.forEach(function(quote) {
+      // Cause the task to render
+      quote.render();
+      // Add that HTML to our task list
+      this.listElement.append(quote.$el);
+    }, this);
 
     return this;
-  }
+  } // end of render fx
+
+
 });
 
 export default ApplicationView;

src/app/views/quote_view.js

@@ -0,0 +1,41 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+var QuoteView = Backbone.View.extend({
+
+/////////////////// straight up copied
+
+  initialize: function(options) {
+    this.quote = options.quote;
+    this.template = options.template;
+  },
+
+  render: function() {
+    // alert('it has been rendered');
+    var html = this.template({quote: this.quote});
+    this.$el.html(html);
+    return this;
+  },
+
+  events: {
+    'click .btn-buy': 'buy',
+    'click .btn-sell': 'sell'
+  }, // end of events
+
+  buy: function(event) {
+    event.preventDefault();
+    // take the price and increment by 10, then re-render
+    this.quote.price += 10;
+    this.render();
+  },
+
+  sell: function(event) {
+    event.preventDefault();
+    // subtract 10 from the price, re-render
+    this.quote.price -= 10;
+    this.render();
+  }
+})
+
+export default QuoteView;