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;