From 2bffac55c0f8db3a3e364cf2d97190010008c24a Mon Sep 17 00:00:00 2001 From: Olivia Date: Mon, 19 Jun 2017 11:27:49 -0700 Subject: [PATCH 1/8] first commit of v2 --- build/index.html | 8 +++++++- src/app.js | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html index 03869595f..a10bf4709 100644 --- a/build/index.html +++ b/build/index.html @@ -1,5 +1,6 @@ +
@@ -8,8 +9,13 @@ Backbone Baseline + +
+ +
- +
+ diff --git a/src/app.js b/src/app.js index 58b77997c..538e8efb4 100644 --- a/src/app.js +++ b/src/app.js @@ -7,6 +7,6 @@ import _ from 'underscore'; // ready to go $(document).ready(function() { - $('section.main-content').append('

Hello World!

'); + $('main').append('

Hello World!

'); }); From 9e9f1640ac984a0e5f5dec55ba894ac612ef5090 Mon Sep 17 00:00:00 2001 From: Olivia Date: Mon, 19 Jun 2017 13:32:38 -0700 Subject: [PATCH 2/8] first movie model --- src/models/movie.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/models/movie.js diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..e33fe4d95 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + + initialize: function(params) { + +}, +//url is the default route tht fetch goes to on the model + url: 'http://localhost:3000/movies' + +}); + +export default Movie; From 00796a26cb5574382c40f3511faa3b4616fed992 Mon Sep 17 00:00:00 2001 From: Olivia Date: Mon, 19 Jun 2017 13:39:32 -0700 Subject: [PATCH 3/8] rental collection --- src/collections/rentalLibrary.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/collections/rentalLibrary.js diff --git a/src/collections/rentalLibrary.js b/src/collections/rentalLibrary.js new file mode 100644 index 000000000..031597e02 --- /dev/null +++ b/src/collections/rentalLibrary.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +//for collections the instatiation is diff +var RentalLibrary = Backbone.Collection.extend({ + +model: Movie, +url: 'http://localhost:3000/movies' +}); + +export default RentalLibrary; From 605631d0d475b907a22c6812ac1d74a83ac2fedb Mon Sep 17 00:00:00 2001 From: Olivia Date: Mon, 19 Jun 2017 15:23:55 -0700 Subject: [PATCH 4/8] made rentalLibrary suite --- build/index.html | 16 +++++++++---- src/app.js | 22 ++++++++++++++---- src/collections/searchResults.js | 11 +++++++++ src/views/movieView.js | 31 +++++++++++++++++++++++++ src/views/rentalLibraryView.js | 39 ++++++++++++++++++++++++++++++++ src/views/searchResultsView.js | 0 6 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 src/collections/searchResults.js create mode 100644 src/views/movieView.js create mode 100644 src/views/rentalLibraryView.js create mode 100644 src/views/searchResultsView.js diff --git a/build/index.html b/build/index.html index a10bf4709..a23acc333 100644 --- a/build/index.html +++ b/build/index.html @@ -9,13 +9,19 @@ Backbone Baseline - -
+
+ -
- - + + + + + diff --git a/src/app.js b/src/app.js index 538e8efb4..ad9353f8b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,24 @@ -// /src/app.js - -// Import jQuery & Underscore import $ from 'jquery'; import _ from 'underscore'; -// ready to go +import RentalLibrary from './collections/rentalLibrary'; +import RentalLibraryView from './views/rentalLibraryView'; + + +var rentalList = new RentalLibrary(); +rentalList.fetch(); + +var libraryView = new RentalLibraryView({ + + model: rentalList, + template: _.template($('#movie-card-template').html()), + el: 'main' +}); + + + $(document).ready(function() { +libraryView.render(); - $('main').append('

Hello World!

'); }); diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js new file mode 100644 index 000000000..b124abd7b --- /dev/null +++ b/src/collections/searchResults.js @@ -0,0 +1,11 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + + +var SearchResults = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies?query=' + +}); + +export default SearchResults; diff --git a/src/views/movieView.js b/src/views/movieView.js new file mode 100644 index 000000000..a6ae3e80d --- /dev/null +++ b/src/views/movieView.js @@ -0,0 +1,31 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +//templating +import _ from 'underscore'; +//the power to select any html element within js, uing a dollar sign and then access additional methods +import $ from 'jquery'; + + +var MovieView = Backbone.View.extend({ + + initialize: function(params){ + this.template = params.template; + this.listenTo(this.model, "change", this.render); + }, + + render: function(){ + var compiledTemplate = this.template(this.model.toJSON() ); + //put the above in this particular view object's`el`, we assign 'el' to the html element we're working in - jq .html + this.$el.html(compiledTemplate); + return this; + }, + + events: { + + } + +}); + + + +export default MovieView; diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js new file mode 100644 index 000000000..ad44332eb --- /dev/null +++ b/src/views/rentalLibraryView.js @@ -0,0 +1,39 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +import RentalLibrary from '../collections/rentalLibrary'; +import MovieView from './movieView'; +//templating +import _ from 'underscore'; +//the power to select any html element within js, uing a dollar sign and then access additional methods +import $ from 'jquery'; + +//for initializing any backbone view: + +var RentalLibraryView = Backbone.View.extend( { + + initialize: function(params) { + this.template = params.template; + }, + + render: function(){ + console.log("hi"); + this.$('#movie-list').empty(); + + var that = this; + + this.model.each(function(movie) { + var movieView = new MovieView ({ + model: movie, + template: that.template + }); + + that.$('#movie-list').append(movieView.render().el); + }); + }, + + events: { + + } +}); + +export default RentalLibraryView; diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js new file mode 100644 index 000000000..e69de29bb From 321ef807261d495d7ca4b86afe57765a883dd899 Mon Sep 17 00:00:00 2001 From: Olivia Date: Mon, 19 Jun 2017 15:38:43 -0700 Subject: [PATCH 5/8] search results view --- src/views/rentalLibraryView.js | 2 -- src/views/searchResultsView.js | 36 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js index ad44332eb..c4f125c33 100644 --- a/src/views/rentalLibraryView.js +++ b/src/views/rentalLibraryView.js @@ -16,11 +16,9 @@ var RentalLibraryView = Backbone.View.extend( { }, render: function(){ - console.log("hi"); this.$('#movie-list').empty(); var that = this; - this.model.each(function(movie) { var movieView = new MovieView ({ model: movie, diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js index e69de29bb..b814b7fc6 100644 --- a/src/views/searchResultsView.js +++ b/src/views/searchResultsView.js @@ -0,0 +1,36 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +import MovieView from './movieView'; +//templating +import _ from 'underscore'; +//the power to select any html element within js, uing a dollar sign and then access additional methods +import $ from 'jquery'; + +var SearchResults = Backbone.View.extend({ + + initialize: function(params){ + this.template = params.template; + }, + + render: function(){ + this.$('#movie-list').empty(); + + var that = this; + + this.model.each(function(movie) { + var movieView = new MovieView ({ + model: movie, + template: that.template + }); + + that.$('#movie-list').append(movieView.render().el); + }); + }, + + events: { + + } + +}); + +export default SearchResultsView; From 0af8411e43079bf8bdc64062454bb7292b4a9cde Mon Sep 17 00:00:00 2001 From: Olivia Date: Tue, 20 Jun 2017 15:27:02 -0700 Subject: [PATCH 6/8] search functionality in but get error persists --- build/index.html | 18 ++++++++++++------ src/app.js | 2 +- src/collections/searchResults.js | 2 +- src/views/rentalLibraryView.js | 19 ++++++++++++++++++- src/views/searchResultsView.js | 2 +- 5 files changed, 33 insertions(+), 10 deletions(-) diff --git a/build/index.html b/build/index.html index a23acc333..1e825478b 100644 --- a/build/index.html +++ b/build/index.html @@ -9,19 +9,25 @@ Backbone Baseline -
+ +
- - + + diff --git a/src/app.js b/src/app.js index ad9353f8b..e0d22721d 100644 --- a/src/app.js +++ b/src/app.js @@ -20,5 +20,5 @@ var libraryView = new RentalLibraryView({ $(document).ready(function() { libraryView.render(); - + }); diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js index b124abd7b..95e657bc7 100644 --- a/src/collections/searchResults.js +++ b/src/collections/searchResults.js @@ -4,7 +4,7 @@ import Movie from '../models/movie'; var SearchResults = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies?query=' + url: 'http://localhost:3000/movies/search?' }); diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js index c4f125c33..462957264 100644 --- a/src/views/rentalLibraryView.js +++ b/src/views/rentalLibraryView.js @@ -2,6 +2,8 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; import RentalLibrary from '../collections/rentalLibrary'; import MovieView from './movieView'; +import SearchResults from '../collections/searchResults'; +import SearchResultsView from './searchResultsView'; //templating import _ from 'underscore'; //the power to select any html element within js, uing a dollar sign and then access additional methods @@ -30,8 +32,23 @@ var RentalLibraryView = Backbone.View.extend( { }, events: { + "click #search": "search", + "click #logo": "render" + }, - } + search: function(){ + //getting the query term from the search background + var query = this.$("#query").val(); + //creating a new instance of search result and calling the rails api for the data + var searchResults = new SearchResults(); + searchResults.fetch({ data: $.param({ query }) }); + //var query here is what we're passing to the fetch argument and will add "queryterm" onto url + var searchResultsView = new SearchResultsView({ + model: searchResults, + template: _.template($('#movie-card-template').html()), + el: 'main' + }); + }, }); export default RentalLibraryView; diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js index b814b7fc6..0ae12db45 100644 --- a/src/views/searchResultsView.js +++ b/src/views/searchResultsView.js @@ -6,7 +6,7 @@ import _ from 'underscore'; //the power to select any html element within js, uing a dollar sign and then access additional methods import $ from 'jquery'; -var SearchResults = Backbone.View.extend({ +var SearchResultsView = Backbone.View.extend({ initialize: function(params){ this.template = params.template; From 709f226dbd10013eb8bf381d1f0eb4c6bc27de91 Mon Sep 17 00:00:00 2001 From: Olivia Date: Wed, 21 Jun 2017 11:24:43 -0700 Subject: [PATCH 7/8] search results finally rendering --- src/collections/searchResults.js | 3 ++- src/models/movie.js | 2 +- src/views/rentalLibraryView.js | 3 +++ src/views/searchResultsView.js | 1 + 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js index 95e657bc7..40183ffa0 100644 --- a/src/collections/searchResults.js +++ b/src/collections/searchResults.js @@ -4,7 +4,8 @@ import Movie from '../models/movie'; var SearchResults = Backbone.Collection.extend({ model: Movie, - url: 'http://localhost:3000/movies/search?' + url: 'http://localhost:3000/movies?' + }); diff --git a/src/models/movie.js b/src/models/movie.js index e33fe4d95..21b3f2fa2 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -6,7 +6,7 @@ var Movie = Backbone.Model.extend({ }, //url is the default route tht fetch goes to on the model - url: 'http://localhost:3000/movies' + // url: 'http://localhost:3000/movies' }); diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js index 462957264..49cfb21ee 100644 --- a/src/views/rentalLibraryView.js +++ b/src/views/rentalLibraryView.js @@ -37,11 +37,14 @@ var RentalLibraryView = Backbone.View.extend( { }, search: function(){ + // console.log("hi"); //getting the query term from the search background var query = this.$("#query").val(); //creating a new instance of search result and calling the rails api for the data var searchResults = new SearchResults(); searchResults.fetch({ data: $.param({ query }) }); + console.log(searchResults); + // console.log( $.param({ query }) ); //var query here is what we're passing to the fetch argument and will add "queryterm" onto url var searchResultsView = new SearchResultsView({ model: searchResults, diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js index 0ae12db45..981629e2d 100644 --- a/src/views/searchResultsView.js +++ b/src/views/searchResultsView.js @@ -10,6 +10,7 @@ var SearchResultsView = Backbone.View.extend({ initialize: function(params){ this.template = params.template; + this.listenTo(this.model, 'update', this.render); }, render: function(){ From 4c6b17f98bb7deb28358dbe010d19e71c94cce4b Mon Sep 17 00:00:00 2001 From: Olivia Date: Fri, 23 Jun 2017 14:18:30 -0700 Subject: [PATCH 8/8] everything thus far --- build/index.html | 7 +++++++ src/collections/searchResults.js | 2 -- src/models/movie.js | 2 +- src/views/movieView.js | 9 +++++++++ src/views/rentalLibraryView.js | 2 +- 5 files changed, 18 insertions(+), 4 deletions(-) diff --git a/build/index.html b/build/index.html index 1e825478b..e1b06dbf0 100644 --- a/build/index.html +++ b/build/index.html @@ -29,5 +29,12 @@ alt=<% title %> + + diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js index 40183ffa0..1dbc316cd 100644 --- a/src/collections/searchResults.js +++ b/src/collections/searchResults.js @@ -5,8 +5,6 @@ import Movie from '../models/movie'; var SearchResults = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies?' - - }); export default SearchResults; diff --git a/src/models/movie.js b/src/models/movie.js index 21b3f2fa2..5979af6d7 100644 --- a/src/models/movie.js +++ b/src/models/movie.js @@ -6,7 +6,7 @@ var Movie = Backbone.Model.extend({ }, //url is the default route tht fetch goes to on the model - // url: 'http://localhost:3000/movies' +url: 'http://localhost:3000/movies' }); diff --git a/src/views/movieView.js b/src/views/movieView.js index a6ae3e80d..bb9e80417 100644 --- a/src/views/movieView.js +++ b/src/views/movieView.js @@ -21,9 +21,18 @@ var MovieView = Backbone.View.extend({ }, events: { + "click #Add-to-library": "add", + }, + + add: function(){ + console.log(this.model); + this.model.save(); } + + + }); diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js index 49cfb21ee..97851d726 100644 --- a/src/views/rentalLibraryView.js +++ b/src/views/rentalLibraryView.js @@ -48,7 +48,7 @@ var RentalLibraryView = Backbone.View.extend( { //var query here is what we're passing to the fetch argument and will add "queryterm" onto url var searchResultsView = new SearchResultsView({ model: searchResults, - template: _.template($('#movie-card-template').html()), + template: _.template($('#new-movie-card-template').html()), el: 'main' }); },