From d7d5964ef36925608ec4efd7d5865c9ca6818463 Mon Sep 17 00:00:00 2001 From: Alyssa Hursh Date: Tue, 29 Nov 2016 13:41:21 -0800 Subject: [PATCH] Wave 3 completed: --- src/app.js | 58 +++++++++++++++++++++++++---- src/app/views/application_view.js | 61 +++++++++++++++++++++++++++++-- src/app/views/quote_view.js | 54 +++++++++++++++++++++++++++ 3 files changed, 163 insertions(+), 10 deletions(-) create mode 100644 src/app/views/quote_view.js diff --git a/src/app.js b/src/app.js index cb932d5..d889903 100644 --- a/src/app.js +++ b/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); +// }); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 30b6d0f..e745d23 100644 --- a/src/app/views/application_view.js +++ b/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('

Hello World

'); + // 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; diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js new file mode 100644 index 0000000..41d3e49 --- /dev/null +++ b/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;