Maya Wang's Ada Trader (parens)

build/index.html

@@ -26,8 +26,8 @@ <h1>Ada Trader</h1>
             <h3 class="symbol large-6 small-6 columns"><%- 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>
+              <button class="btn-sell tiny alert button">Sell</button>
+              <button class="btn-buy tiny success button">Buy</button>
             </div>
           </div>
         </div>

src/app.js

@@ -2,6 +2,36 @@ import $ from 'jquery';
 import _ from 'underscore';
 import ApplicationView from 'app/views/application_view';
 
+var exampleQuotes = [
+  {
+    symbol: 'HUMOR', price: 88.50, desc: "Cristal's HumorUs capstone"
+  },
+  {
+    symbol: 'CLOTH', price: 81.70, desc: "Sophia's Cloth Sim capstone"
+  },
+  {
+    symbol: 'HABIT', price: 98.00, desc: "Val's Habitmon capstone"
+  },
+  {
+    symbol: 'SUPER', price: 83.10, desc: "Rowan's Super Hero Draft capstone"
+  },
+  {
+    symbol: 'INGRD', price: 79.40, desc: "Nicole's Ingredient Inspector capstone"
+  },
+  {
+    symbol: 'MXTPE', price: 109.20, desc: "Jess's Digital Mixtape capstone"
+  },
+  {
+    symbol: 'CNTAR', price: 90.70, desc: "Leah's Centaur capstone"
+  },
+  {
+    symbol: 'EVCLR', price: 101.90, desc: "Lisa's Evolution In Color capstone"
+  },
+  {
+    symbol: 'FUZZY', price: 88.60, desc: "Jade's Fuzz Therapy capstone"
+  }
+];
+
 const simulate = function(quote) {
   // Calculate a random price movement
   const maxChange = 1.00;
@@ -19,7 +49,8 @@ const simulate = function(quote) {
 
 $(document).ready(function() {
   var appView = new ApplicationView({
-    el: '#application'
+    el: '#application',
+    quoteList: exampleQuotes,
   });
 
   appView.render();

src/app/views/application_view.js

@@ -1,11 +1,37 @@
+import $ from 'jquery';
+import _ from 'underscore';
 import Backbone from 'backbone';
+import QuoteView from 'app/views/quote_view';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
+  initialize: function(options) {
+    this.quoteList = options.quoteList;
+    // Compile a Underscore template
+    this.template = _.template($('#tmpl-quote-view').html());
+
+    this.quoteViewList = [];
+
+    this.quoteList.forEach(function(quote) {
+      var quoteView = new QuoteView(quote, this.template);
+      this.quoteViewList.push(quoteView);
+    }, this); // bind `this` so it's available inside forEach
+
+    this.quoteListEl = $('.quotes');
   },
 
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    // Make sure the list in the DOM is empty
+    // before we start appending items
+    this.quoteListEl.empty();
+
+    // Loop through the data assigned to this view
+    this.quoteViewList.forEach(function(quoteView) {
+      // Cause the quote to render
+      quoteView.render();
+
+      // Add that HTML to our quote list
+      this.quoteListEl.append(quoteView.$el);
+    }, this);
 
     return this;
   }

src/app/views/quote_view.js

@@ -0,0 +1,48 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+
+const QuoteView = Backbone.View.extend({
+  initialize: function(quote, template) {
+    this.quote = quote;
+
+    if (!template) {
+      // Compile a Underscore template
+      this.template = _.template($('#tmpl-quote-view').html());
+    } else {
+      this.template = template;
+    }
+  },
+
+  render: function() {
+    var html = this.template({
+      symbol: this.quote.symbol,
+      price: this.quote.price,
+    });
+
+    this.$el.html(html);
+
+    // Enable chained calls
+    return this;
+  },
+
+  events: {
+    'click .btn-buy': 'buy',
+    'click .btn-sell': 'sell'
+  },
+
+  buy: function(event) {
+    this.quote.price += 1.0;
+    this.render();
+  },
+
+  sell: function(event) {
+    if (this.quote.price > 1.0) {
+      this.quote.price -= 1.0;
+    }
+
+    this.render();
+  },
+});
+
+export default QuoteView;