diff --git a/index.html b/index.html index 9adc1b3..143d5f2 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,15 @@ - +
+ +
+ +
diff --git a/src/main.js b/src/main.js index 5c7167f..b9953ac 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,7 @@ +/* + * main.js + * + */ (function () { // Create our stocks @@ -11,15 +15,12 @@ // Create a view for each stock and render its element to the page _.each(stocks, function (stock) { - var view = new StockView({ model: stock }); + var view = new StockView({ model: stock }); /* read */ view.render(); $('.stocks').append(view.el); }); - // ---- // Get realtime stock data - // It's not required that you understand the code. - window.updateStocks = function (data) { _.each(data.query.results.quote, function (quote) { diff --git a/src/models/stock.js b/src/models/stock.js index d05bcda..d64d00c 100644 --- a/src/models/stock.js +++ b/src/models/stock.js @@ -1,9 +1,23 @@ +/* + * stock.js + * + */ + (function () { + //Backbone Model + /* + Backbone.Model.prototype.setByName = function(key, value, options) { + var setter = {}; + setter[key] = value; + this.set(setter, options); + }; + */ 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..e41955d 100644 --- a/src/views/stock-view.js +++ b/src/views/stock-view.js @@ -1,8 +1,23 @@ +/* + * stock-view.js + * + */ + (function () { window.StockView = Backbone.View.extend({ - className: 'stock' - // TODO + className: 'stock', + initialize: function () { + this.listenTo(this.model, 'change:price', this.render ); + //console.log('New price for', this.model.get('name'), this.model.get('price')); + }, + render: function () { + var priceTemplateHtml = $('#templates .stock').html(); + var priceTemplate = _.template(priceTemplateHtml); + var newHtml = priceTemplate({ name: this.model.get('name'), price: this.model.get('price') }); + //console.log(newHtml); + $(this.el).html(newHtml); + } }); })();