Week 5 project

index.html

@@ -6,12 +6,21 @@
 
 <!-- Put your html here -->
 
+<div class="stocks"></div>
+
+<!-- Using {{}} instead of <%=%> to avoid conflict with erb  -->
+
+	<div id="templates">
+		<script class="stock" type="text/template">
+			<h1>{{ name }}</h1>
+			<p>{{ price }}</p>
+		</script>
+	</div>
 
 <!-- 3rd-party scripts -->
 <script src="vendor/jquery-1.10.2.js" type="text/javascript"></script>
 <script src="vendor/underscore.js" type="text/javascript"></script>
 <script src="vendor/backbone.js" type="text/javascript"></script>
-
 <!-- Globals -->
 <script src="src/util.js" type="text/javascript"></script>
 <!-- Models -->

src/main.js

@@ -18,7 +18,6 @@
 
   // ----
   // Get realtime stock data
-  // It's not required that you understand the code.
 
   window.updateStocks = function (data) {
 

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'));
     }
   });
 

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);
+		}
+	});
 })();