Alyssa - Wave 3 complete

src/app.js

@@ -1,7 +1,29 @@
+// This is the main Javascript file
+
+// Import ApplicationView from the application_view file. (application_view imports QuoteView)
+import ApplicationView from 'app/views/application_view';
+import QuoteView from 'app/views/quote_view';
+
+
+
+// Import Backbone, jQuery and Underscore
+import Backbone from 'backbone';
 import $ from 'jquery';
 import _ from 'underscore';
-import ApplicationView from 'app/views/application_view';
 
+var sampleData = [
+  { symbol: "HUMOR", price: 88.50  },
+  { symbol: "CLOTH", price: 81.70  },
+  { symbol: "HABIT", price: 98.00  },
+  { symbol: "SUPER", price: 83.10  },
+  { symbol: "INGRD", price: 79.40  },
+  { symbol: "MXTPE", price: 109.20 },
+  { symbol: "CNTAR", price: 90.70  },
+  { symbol: "EVCLR", price: 101.90 },
+  { symbol: "FUZZY", price: 88.60  }
+];
+
+// This function was handed to me with the starting file set. It takes a price quote and changes the price randonly.
 const simulate = function(quote) {
   // Calculate a random price movement
   const maxChange = 1.00;
@@ -14,17 +36,39 @@ const simulate = function(quote) {
   }
 
   // Actually trigger the change
+  // NOTE: I do not understand what is happening in this line >>>>>
   quote.trigger('change:price', change);
 };
 
+
+
+
+
 $(document).ready(function() {
-  var appView = new ApplicationView({
-    el: '#application'
+  var application = new ApplicationView({
+    el: ("#application"),
+    sampleData: sampleData
   });
 
-  appView.render();
+  application.render();
 
-  setInterval(function() {
-    // Call simulate() on each quote in the ApplicationView
-  }, 1000);
 });
+
+
+
+//
+// $(document).ready(function() {
+//   var appView = new ApplicationView({
+//     el: $('#application')
+//   });
+//
+//   appView.render();
+//
+//   var quote = new QuoteView({
+//     sampleData[0];
+//   });
+//
+//   setInterval(function() {
+//     // Call simulate() on each quote in the ApplicationView
+//   }, 1000);
+// });

src/app/views/application_view.js

@@ -1,14 +1,69 @@
+// This is the main application view, which should get information from calls to QuoteView
+
+// import Backbone and QuoteView
+import QuoteView from 'app/views/quote_view';
+
+// Import Backbone, jQuery and Underscore
 import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
 
+// This Application View was handed to me with the starting file set. It is a constant with an initialize that takes no argument and a render that simply renders Hello World.
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
+  initialize: function(options) {
+    // Store the full list of sampleData as an instance variable called sampleData
+    this.sampleData = options.sampleData;
+
+    // Compile the template by using jQuery to locate the html helement with the ID tmpl-qote-view
+    this.quoteTemplate = _.template($('#tmpl-quote-view').html());
+
+    // Send information to console to help with debugging.
+    console.log("I just greated the quote template:");
+    console.log(this.quoteTemplate);
+
+    // Store the targeted list element after finding it with a jQuery search for the class quotes
+    this.listElement = this.$('.quotes');
+
+    // Create a blank array to store elements
+    this.quoteList = [];
+
+    // Iterate through the sampleData and do the following:
+    this.sampleData.forEach(function(quote) {
+
+      // Create a new TaskView with the parameters task and taskTemplate
+      var listItem = new QuoteView({
+        quote: quote,
+        template: this.quoteTemplate
+      });
+
+      // Push this item into the item array
+      this.quoteList.push(listItem);
+      console.log("You've just push something to quoteList. Here's where that quoteList stands:");
+      console.log(this.quoteList);
+    }, this); // bind `this` so it's available inside forEach (I still don't understand what this is doing)
   },
 
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    // Make sure the list in the DOM is empty
+    // before we start appending items
+    console.log("You're in the ApplicationView render function, about to empty the listElement");
+    this.listElement.empty();
 
-    return this;
+    // Loop through the data assigned to this view
+    this.quoteList.forEach(function(listItem) {
+      // Cause the object to render
+      console.log("You're in the quoteList loop in the AV render function");
+      console.log(listItem);
+      listItem.render();
+
+      // Add that HTML to our task list
+      this.listElement.append(listItem.$el);
+    }, this);
+
+    return this; // enable chained calls
   }
 });
 
+
+// Export Application View
 export default ApplicationView;

src/app/views/quote_view.js

@@ -0,0 +1,54 @@
+// This is the quote view, which should act independently and pass information to the application view.
+
+// Import Backbone, jQuery and Underscore
+import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+
+
+var QuoteView = Backbone.View.extend({
+  initialize: function(options) {
+    this.quote = options.quote;
+
+    // .template is a function that takes a hash with one key: quote
+    this.template = options.template;
+
+    // this is currently returning undefined
+    console.log(this.template);
+  },
+  render: function() {
+    // I am currently reaching this line but cannot act on the template call.
+    console.log("You're in the QV render function but you haven't made new HTML");
+
+    // NOTE: SOMEONE HAD BETTER EXPLAIN TO ME WHY THIS TEMPLATE DOESN'T TAKE A HASH THE WAY THAT THE OTHER TEMPLATE FROM TASK LIST DID
+    var html = this.template(this.quote);
+    console.log("You've made new HTML'");
+
+    this.$el.html(html);
+
+    // return this;
+    console.log("You've left the QV render function");
+
+  },
+
+  events: {
+    'click .btn-sell': 'buyFunction',
+    'click .btn-buy': 'sellFunction'
+  },
+
+  // NOTE: WHY IS THIS THE CORRECT SYNTAX?
+  buyFunction: function() {
+    this.quote.price += 1.00;
+    this.render();
+  },
+
+  sellFunction: function() {
+    this.quote.price -= 1.00;
+    this.render();
+  }
+
+
+});
+
+
+export default QuoteView;