diff --git a/build/index.html b/build/index.html index 79b1a0f..be6e439 100644 --- a/build/index.html +++ b/build/index.html @@ -26,8 +26,8 @@

Ada Trader

<%- symbol %>

$<%- price.toFixed(2) %>

- - + +
diff --git a/src/app.js b/src/app.js index cb932d5..9e454d0 100644 --- a/src/app.js +++ b/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(); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 30b6d0f..e516344 100644 --- a/src/app/views/application_view.js +++ b/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('

Hello World

'); + // 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; } diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js new file mode 100644 index 0000000..3fa4d56 --- /dev/null +++ b/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;