diff --git a/index.html b/index.html index 9adc1b3..b9bdf8f 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,21 @@ +
+ + + +
+ +
- diff --git a/src/main.js b/src/main.js index 3872b23..619079f 100644 --- a/src/main.js +++ b/src/main.js @@ -18,7 +18,6 @@ // ---- // Get realtime stock data - // It's not required that you understand the code. window.updateStocks = function (data) { diff --git a/src/models/stock.js b/src/models/stock.js index d05bcda..71b6776 100644 --- a/src/models/stock.js +++ b/src/models/stock.js @@ -1,9 +1,15 @@ -(function () { +// The parseFloat() function converts the incoming newPrice from a string to floating integer. +// +// +// Sets the new price value on the model + +(function(){ window.Stock = Backbone.Model.extend({ updatePrice: function (newPrice) { - console.log('Updating', this.get('name'), 'price to:', newPrice); - // TODO + this.price = parseFloat(newPrice); + this.set({ price: this.price }); + console.log('Updating', this.get('name'), 'price to:', this.get('price')); } }); diff --git a/src/views/stock-view.js b/src/views/stock-view.js index faa5795..2b0c32d 100644 --- a/src/views/stock-view.js +++ b/src/views/stock-view.js @@ -1,8 +1,22 @@ + // Listen for StockView's model's changes in initialize. + // + // Render function updates the 'el'ement using an underscore template. + // + // Render the stock name and price. + (function () { window.StockView = Backbone.View.extend({ - className: 'stock' - // TODO - }); + className: 'stock', + initialize: function(){ + this.listenTo(this.model, 'change:price', this.render); + }, + render: function(){ + var priceTemplateHtml = $('#templates .stock').html(); + var priceTemplate = _.template(priceTemplateHtml); + var newTemplateHtml = priceTemplate({ name: this.model.get('name'), price: this.model.get('price') }); + $(this.el).html(newTemplateHtml); + } + }); })();