From a3c8cece3144d741dfea4db11a06c4a652172ae7 Mon Sep 17 00:00:00 2001 From: leejaew Date: Fri, 4 Oct 2013 09:37:55 -0500 Subject: [PATCH 1/4] use the parseFloat function to convert the incoming newPrice from a string to a decimal number --- src/main.js | 7 ++++--- src/models/stock.js | 10 ++++++++-- src/views/stock-view.js | 5 +++++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/main.js b/src/main.js index 5c7167f..3b7764d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,7 @@ +/* + * main.js + * + */ (function () { // Create our stocks @@ -16,10 +20,7 @@ $('.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..f939664 100644 --- a/src/models/stock.js +++ b/src/models/stock.js @@ -1,9 +1,15 @@ +/* + * stock.js + * + */ + (function () { window.Stock = Backbone.Model.extend({ updatePrice: function (newPrice) { - console.log('Updating', this.get('name'), 'price to:', newPrice); - // TODO + + this.newPrice = parseFloat(newPrice) + console.log('Updating', this.get('name'), 'price to:', this.newPrice); } }); diff --git a/src/views/stock-view.js b/src/views/stock-view.js index faa5795..bded684 100644 --- a/src/views/stock-view.js +++ b/src/views/stock-view.js @@ -1,3 +1,8 @@ +/* + * stock-view.js + * + */ + (function () { window.StockView = Backbone.View.extend({ From 4cd5f6151366b503cfd130a6e403d29a089bde49 Mon Sep 17 00:00:00 2001 From: leejaew Date: Fri, 4 Oct 2013 09:52:09 -0500 Subject: [PATCH 2/4] set the new price value on the model --- src/models/stock.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/models/stock.js b/src/models/stock.js index f939664..c576186 100644 --- a/src/models/stock.js +++ b/src/models/stock.js @@ -5,12 +5,21 @@ (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) { - - this.newPrice = parseFloat(newPrice) - console.log('Updating', this.get('name'), 'price to:', this.newPrice); + this.newPrice = parseFloat(newPrice); + this.set('newPrice', this.newPrice); + console.log('Updating', this.get('name'), 'price to:', this.newPrice); } }); + })(); From 9994c8e20f30c504ae9ae38f66c48bf0036ddcaa Mon Sep 17 00:00:00 2001 From: leejaew Date: Fri, 4 Oct 2013 11:02:56 -0500 Subject: [PATCH 3/4] get model data and display it from the view. use underscore template to render html --- index.html | 9 ++++++++- src/main.js | 2 +- src/models/stock.js | 7 +++---- src/views/stock-view.js | 14 ++++++++++++-- 4 files changed, 24 insertions(+), 8 deletions(-) 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 3b7764d..b9953ac 100644 --- a/src/main.js +++ b/src/main.js @@ -15,7 +15,7 @@ // 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); }); diff --git a/src/models/stock.js b/src/models/stock.js index c576186..d64d00c 100644 --- a/src/models/stock.js +++ b/src/models/stock.js @@ -15,11 +15,10 @@ */ window.Stock = Backbone.Model.extend({ updatePrice: function (newPrice) { - this.newPrice = parseFloat(newPrice); - this.set('newPrice', this.newPrice); - console.log('Updating', this.get('name'), 'price to:', this.newPrice); + 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 bded684..20d3b8e 100644 --- a/src/views/stock-view.js +++ b/src/views/stock-view.js @@ -6,8 +6,18 @@ (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); + } }); })(); From 3a624ec9a7f17941fe444c5a3184bcdf5fa48937 Mon Sep 17 00:00:00 2001 From: leejaew Date: Mon, 7 Oct 2013 13:48:03 -0500 Subject: [PATCH 4/4] comment out console.log --- src/views/stock-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/stock-view.js b/src/views/stock-view.js index 20d3b8e..e41955d 100644 --- a/src/views/stock-view.js +++ b/src/views/stock-view.js @@ -15,7 +15,7 @@ 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); + //console.log(newHtml); $(this.el).html(newHtml); } });