From 855630e6866583b47bf3578d5feb06a405228952 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Mon, 18 Dec 2017 13:17:59 -0800 Subject: [PATCH 01/13] added movie model and collection, views for both, add underscore template for movielistview --- dist/index.html | 15 ++++++++++++++- src/app.js | 11 +++++++++++ src/collections/movie_list.js | 12 ++++++++++++ src/models/movie.js | 7 +++++++ src/views/movie_list_view.js | 25 +++++++++++++++++++++++++ src/views/movie_view.js | 17 +++++++++++++++++ 6 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/collections/movie_list.js create mode 100644 src/models/movie.js create mode 100644 src/views/movie_list_view.js create mode 100644 src/views/movie_view.js diff --git a/dist/index.html b/dist/index.html index 559b18ecd..3c9626c30 100644 --- a/dist/index.html +++ b/dist/index.html @@ -6,9 +6,22 @@
- +
+

Video Store

+
+ +

All the Movies!

+
+
    +
+
+
+ + diff --git a/src/app.js b/src/app.js index 30c00d594..d47d88144 100644 --- a/src/app.js +++ b/src/app.js @@ -6,9 +6,20 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; +import Movie from './models/movie'; +import MovieList from './collections/movie_list'; + // ready to go $(document).ready(function() { + const movies = new MovieList(); + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main' + }); // end of const $('#main-content').append('

Hello World!

'); + movieListView.render(); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..7c465c500 --- /dev/null +++ b/src/collections/movie_list.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieList = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies', + parse(response) { + return response['movies'] + }, +}); + +export default MovieList; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..40433eedd --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + +}); + +export default Movie; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js new file mode 100644 index 000000000..5d614f071 --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import MovieView from '../views/movie_view'; +import Movie from '../models/movie'; + +const MovieListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, "update", this.render); + }, + render() { + this.$('#movies').empty(); + this.model.each((movie) => { + const movieView = new MovieView ({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie' + }); + }); // end of each loop + return this; + } // end of render +}); // end MovieListView + +export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..4ecfbef6b --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,17 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, +}); + +export default MovieView; From fdc4c36fd5f366ee9f29245bdb1555837141c466 Mon Sep 17 00:00:00 2001 From: Sara C Date: Mon, 18 Dec 2017 13:42:50 -0800 Subject: [PATCH 02/13] list of titles rendered from library movies --- src/app.js | 5 +++-- src/collections/movie_list.js | 3 ++- src/views/movie_list_view.js | 2 ++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app.js b/src/app.js index d47d88144..9a4fb3b43 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,9 @@ import './css/styles.css'; import $ from 'jquery'; import _ from 'underscore'; -import Movie from './models/movie'; -import MovieList from './collections/movie_list'; +import Movie from 'models/movie'; +import MovieList from 'collections/movie_list'; +import MovieListView from 'views/movie_list_view'; // ready to go $(document).ready(function() { diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 7c465c500..12631f796 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -5,7 +5,8 @@ const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', parse(response) { - return response['movies'] + console.log(this) + return response; }, }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 5d614f071..1c7f9b0e4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -10,6 +10,7 @@ const MovieListView = Backbone.View.extend({ }, render() { this.$('#movies').empty(); + this.model.fetch(); this.model.each((movie) => { const movieView = new MovieView ({ model: movie, @@ -17,6 +18,7 @@ const MovieListView = Backbone.View.extend({ tagName: 'li', className: 'movie' }); + this.$('#movies').append(movieView.render().$el); }); // end of each loop return this; } // end of render From 913571dee7737b54602c5ff9bc6e60e136099bcf Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Mon, 18 Dec 2017 14:07:01 -0800 Subject: [PATCH 03/13] added search bar and button to html --- dist/index.html | 7 +++++++ src/app.js | 1 - src/collections/movie_list.js | 1 - 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 3c9626c30..22149f103 100644 --- a/dist/index.html +++ b/dist/index.html @@ -10,6 +10,13 @@

Video Store

+
+
+ + +
+
+

All the Movies!

    diff --git a/src/app.js b/src/app.js index 9a4fb3b43..fb8f0c46c 100644 --- a/src/app.js +++ b/src/app.js @@ -19,7 +19,6 @@ $(document).ready(function() { template: _.template($('#movie-template').html()), el: 'main' }); // end of const - $('#main-content').append('

    Hello World!

    '); movieListView.render(); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 12631f796..a499269d1 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -5,7 +5,6 @@ const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', parse(response) { - console.log(this) return response; }, }); From b85a80e9d2b86bef396711b35041f76ed53612f0 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Mon, 18 Dec 2017 14:26:20 -0800 Subject: [PATCH 04/13] added function getMovie, not working yet --- src/views/movie_view.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 4ecfbef6b..b3d85b08f 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -1,5 +1,6 @@ import Backbone from 'backbone'; import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; const MovieView = Backbone.View.extend({ initialize(params) { @@ -12,6 +13,15 @@ const MovieView = Backbone.View.extend({ return this; }, + events: { + 'click button.search': 'getMovie', + }, + getMovie: function (e) { + const title = this.$el.find('input').val(); + const movies = new MovieList({title: title}); + + movies.fetch(); + } }); export default MovieView; From 062779235cd69ecd8343b426a1fc037b6e3ffc62 Mon Sep 17 00:00:00 2001 From: Sara C Date: Mon, 18 Dec 2017 14:29:02 -0800 Subject: [PATCH 05/13] trying to fix merge conflicts --- src/collections/movie_list.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 12631f796..a499269d1 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -5,7 +5,6 @@ const MovieList = Backbone.Collection.extend({ model: Movie, url: 'http://localhost:3000/movies', parse(response) { - console.log(this) return response; }, }); From 4ebda97d569ffb983afe736d2a775f60d55da903 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 19 Dec 2017 11:09:59 -0800 Subject: [PATCH 06/13] added searchDbList function, moved fetch to app.js, added searchUrl to the collection --- dist/index.html | 9 ++++++-- src/app.js | 40 ++++++++++++++++++++++++++--------- src/collections/movie_list.js | 5 +++++ src/views/movie_list_view.js | 2 +- src/views/movie_view.js | 14 ++++++------ 5 files changed, 51 insertions(+), 19 deletions(-) diff --git a/dist/index.html b/dist/index.html index 22149f103..953b1d93a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -12,12 +12,13 @@

    Video Store

    - - + +

    All the Movies!

    +
    @@ -29,6 +30,10 @@

    All the Movies!

    <%- title %>

    + + diff --git a/src/app.js b/src/app.js index fb8f0c46c..953f3b7b9 100644 --- a/src/app.js +++ b/src/app.js @@ -10,16 +10,36 @@ import Movie from 'models/movie'; import MovieList from 'collections/movie_list'; import MovieListView from 'views/movie_list_view'; -// ready to go -$(document).ready(function() { - const movies = new MovieList(); + const allMovieList = function(event){ + const movies = new MovieList(); + movies.fetch(); - const movieListView = new MovieListView({ - model: movies, - template: _.template($('#movie-template').html()), - el: 'main' - }); // end of const + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main' + }); // end of const + movieListView.render(); + }; + + const searchDbList = function(event){ + event.preventDefault(); + const searchParams = $('#searchParams').val(); - movieListView.render(); + const returnedList = new MovieList(); + returnedList.searchUrl(searchParams); + returnedList.fetch(); + + const searchReturns = new MovieListView({ + model:returnedList, + template: _.template($('#return-template').html()), + el: 'main' + }); + searchReturns.render(); + }; -}); + // ready to go + $(document).ready(function() { + $('.list_movies').click(allMovieList); + $('#search-form').submit(searchDbList); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index a499269d1..08dbf58a2 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -7,6 +7,11 @@ const MovieList = Backbone.Collection.extend({ parse(response) { return response; }, + searchUrl: function(searchTerm){ + this.url = this.url + "?query=" + searchTerm; + console.log(this.url); + return this; + } }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 1c7f9b0e4..db1667c42 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -10,7 +10,7 @@ const MovieListView = Backbone.View.extend({ }, render() { this.$('#movies').empty(); - this.model.fetch(); + // this.model.fetch(); this.model.each((movie) => { const movieView = new MovieView ({ model: movie, diff --git a/src/views/movie_view.js b/src/views/movie_view.js index b3d85b08f..7467aec16 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -8,6 +8,7 @@ const MovieView = Backbone.View.extend({ this.listenTo(this.model, "change", this.render); }, render() { + console.log(this); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); @@ -15,13 +16,14 @@ const MovieView = Backbone.View.extend({ }, events: { 'click button.search': 'getMovie', - }, - getMovie: function (e) { - const title = this.$el.find('input').val(); - const movies = new MovieList({title: title}); - movies.fetch(); - } + }, + // getMovie: function (e) { + // const title = this.$el.find('input').val(); + // const movies = new MovieList({title: title}); + // + // movies.fetch(); + // } }); export default MovieView; From 7d210748fbe964a095c6976364d3094ea94c62a0 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 19 Dec 2017 12:46:16 -0800 Subject: [PATCH 07/13] moved allMoviesList to movie list views --- dist/index.html | 2 +- src/app.js | 58 ++++++++++++++++++++---------------- src/views/movie_list_view.js | 21 ++++++++++++- src/views/movie_view.js | 10 ------- 4 files changed, 54 insertions(+), 37 deletions(-) diff --git a/dist/index.html b/dist/index.html index 953b1d93a..9e92bba16 100644 --- a/dist/index.html +++ b/dist/index.html @@ -18,7 +18,7 @@

    Video Store

    All the Movies!

    - +
    diff --git a/src/app.js b/src/app.js index 953f3b7b9..5faeff343 100644 --- a/src/app.js +++ b/src/app.js @@ -10,36 +10,44 @@ import Movie from 'models/movie'; import MovieList from 'collections/movie_list'; import MovieListView from 'views/movie_list_view'; - const allMovieList = function(event){ - const movies = new MovieList(); - movies.fetch(); - - const movieListView = new MovieListView({ - model: movies, - template: _.template($('#movie-template').html()), - el: 'main' - }); // end of const - movieListView.render(); - }; - - const searchDbList = function(event){ - event.preventDefault(); - const searchParams = $('#searchParams').val(); - + // const allMovieList = function(event){ + // const movies = new MovieList(); + // movies.fetch(); + // + // const movieListView = new MovieListView({ + // model: movies, + // template: _.template($('#movie-template').html()), + // el: 'main' + // }); // end of const + // movieListView.render(); + // }; + // + // const searchDbList = function(event){ + // event.preventDefault(); + // const searchParams = $('#searchParams').val(); + // const returnedList = new MovieList(); - returnedList.searchUrl(searchParams); - returnedList.fetch(); - - const searchReturns = new MovieListView({ - model:returnedList, + // returnedList.searchUrl(searchParams); + // returnedList.fetch(); + const searchReturns = new MovieListView({ + model: returnedList, template: _.template($('#return-template').html()), el: 'main' }); - searchReturns.render(); - }; + + + // end of const // ready to go $(document).ready(function() { - $('.list_movies').click(allMovieList); - $('#search-form').submit(searchDbList); + const movies = new MovieList(); + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main' + }); + movieListView.render(); + searchReturns.render(); + // $('.list_movies').click(allMovieList); + // $('#search-form').submit(searchDbList); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index db1667c42..754d48092 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -2,6 +2,7 @@ import Backbone from 'backbone'; import _ from 'underscore'; import MovieView from '../views/movie_view'; import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; const MovieListView = Backbone.View.extend({ initialize(params) { @@ -18,10 +19,28 @@ const MovieListView = Backbone.View.extend({ tagName: 'li', className: 'movie' }); + this.$('#movies').append(movieView.render().$el); }); // end of each loop return this; - } // end of render + }, // end of render + events: { + 'click button.api-movies': 'getMovies', + 'submit #search-form': 'getRequest', + }, + getMovies: function (e) { + this.model.fetch(); + }, + + getRequest: function (e) { + console.log("YOU HIT THE BUTTON!"); + e.preventDefault(); + const searchParams = this.$('#searchParams').val(); + const returnedList = new MovieList(); + returnedList.searchUrl(searchParams); + returnedList.fetch(); + }, + }); // end MovieListView export default MovieListView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 7467aec16..63be4fc34 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -8,22 +8,12 @@ const MovieView = Backbone.View.extend({ this.listenTo(this.model, "change", this.render); }, render() { - console.log(this); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); return this; }, - events: { - 'click button.search': 'getMovie', - }, - // getMovie: function (e) { - // const title = this.$el.find('input').val(); - // const movies = new MovieList({title: title}); - // - // movies.fetch(); - // } }); export default MovieView; From d47771a22cdeb3d0fca69d2f389783039c864cda Mon Sep 17 00:00:00 2001 From: Sara C Date: Tue, 19 Dec 2017 12:49:37 -0800 Subject: [PATCH 08/13] attempting refactoring of collection fetch --- src/app.js | 19 ++++++++++++------- src/views/movie_list_view.js | 12 +++++++++++- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/app.js b/src/app.js index 953f3b7b9..b5aa0aa79 100644 --- a/src/app.js +++ b/src/app.js @@ -14,12 +14,7 @@ import MovieListView from 'views/movie_list_view'; const movies = new MovieList(); movies.fetch(); - const movieListView = new MovieListView({ - model: movies, - template: _.template($('#movie-template').html()), - el: 'main' - }); // end of const - movieListView.render(); + }; const searchDbList = function(event){ @@ -38,8 +33,18 @@ import MovieListView from 'views/movie_list_view'; searchReturns.render(); }; + // ready to go $(document).ready(function() { - $('.list_movies').click(allMovieList); + // $('.list_movies').click(allMovieList); + + + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main' + }); // end of const + movieListView.render(); + $('#search-form').submit(searchDbList); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index db1667c42..9ae1c1cf4 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -2,6 +2,7 @@ import Backbone from 'backbone'; import _ from 'underscore'; import MovieView from '../views/movie_view'; import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; const MovieListView = Backbone.View.extend({ initialize(params) { @@ -21,7 +22,16 @@ const MovieListView = Backbone.View.extend({ this.$('#movies').append(movieView.render().$el); }); // end of each loop return this; - } // end of render + }, // end of render + events: { + 'click button.list_movies': 'allMovieList', + 'submit button.search': 'searchDbList', + },//end event + allMovieList: function(event){ + const movies = new MovieList(); + movies.fetch(); + }, + }); // end MovieListView export default MovieListView; From 87489a7f3768c3256214b9b3b603c80729bf0c4a Mon Sep 17 00:00:00 2001 From: Sara C Date: Tue, 19 Dec 2017 16:29:45 -0800 Subject: [PATCH 09/13] added search view and search list view --- dist/index.html | 6 +++++ src/app.js | 25 ++++++++++++------- src/views/movie_list_view.js | 19 ++++++++++++++- src/views/movie_view.js | 1 + src/views/search_list_view.js | 45 +++++++++++++++++++++++++++++++++++ src/views/search_view.js | 20 ++++++++++++++++ 6 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 src/views/search_list_view.js create mode 100644 src/views/search_view.js diff --git a/dist/index.html b/dist/index.html index 9e92bba16..e9d796340 100644 --- a/dist/index.html +++ b/dist/index.html @@ -17,6 +17,12 @@

    Video Store

    +

    All the Searched Movies!

    +
    +
      +
    +
    +

    All the Movies!

    diff --git a/src/app.js b/src/app.js index e696685f7..c3a63b8a0 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,8 @@ import _ from 'underscore'; import Movie from 'models/movie'; import MovieList from 'collections/movie_list'; import MovieListView from 'views/movie_list_view'; +import SearchListView from 'views/search_list_view'; +import SearchView from 'views/search_view'; // const allMovieList = function(event){ // const movies = new MovieList(); @@ -27,14 +29,14 @@ import MovieListView from 'views/movie_list_view'; // const searchParams = $('#searchParams').val(); // - const returnedList = new MovieList(); + // const returnedList = new MovieList(); // returnedList.searchUrl(searchParams); // returnedList.fetch(); - const searchReturns = new MovieListView({ - model: returnedList, - template: _.template($('#return-template').html()), - el: 'main' - }); + // const searchReturns = new MovieListView({ + // model: returnedList, + // template: _.template($('#return-template').html()), + // el: 'main' + // }); // end of const @@ -48,8 +50,15 @@ import MovieListView from 'views/movie_list_view'; template: _.template($('#movie-template').html()), el: 'main' }); - movieListView.render(); - searchReturns.render(); + const results = new MovieList(); + const searchListView = new SearchListView({ + model: results, + template: _.template($('#return-template').html()), + el: 'main' + }); + // movieListView.render(); + // searchListView.render(); + // searchReturns.render(); // $('.list_movies').click(allMovieList); // $('#search-form').submit(searchDbList); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index be919e18b..c9383b6e5 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -4,10 +4,12 @@ import MovieView from '../views/movie_view'; import Movie from '../models/movie'; import MovieList from '../collections/movie_list'; + const MovieListView = Backbone.View.extend({ initialize(params) { this.template = params.template; - this.listenTo(this.model, "update", this.render); + this.searchTemplate = params.searchTemplate; + this.listenTo(this.model, 'update', this.render); }, render() { this.$('#movies').empty(); @@ -16,6 +18,7 @@ const MovieListView = Backbone.View.extend({ const movieView = new MovieView ({ model: movie, template: this.template, + searchTemplate: this.searchTemplate, tagName: 'li', className: 'movie' }); @@ -39,6 +42,20 @@ const MovieListView = Backbone.View.extend({ const returnedList = new MovieList(); returnedList.searchUrl(searchParams); returnedList.fetch(); + console.log("THIS IS returnedList"); + console.log(returnedList); + this.$('#movies').empty(); + // this.model.fetch(); + returnedList.each((movie) => { + const movieView = new MovieView ({ + model: movie, + searchTemplate: this.searchTemplate, + tagName: 'li', + className: 'movie' + }); + const seeSearchTemp = this.searchTemplate(returnedList); + this.$('#results').prepend(seeSearchTemp); + }); }, }); // end MovieListView diff --git a/src/views/movie_view.js b/src/views/movie_view.js index 63be4fc34..b3689c015 100644 --- a/src/views/movie_view.js +++ b/src/views/movie_view.js @@ -5,6 +5,7 @@ import MovieList from '../collections/movie_list'; const MovieView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.searchTemplate = params.searchTemplate; this.listenTo(this.model, "change", this.render); }, render() { diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js new file mode 100644 index 000000000..c3ced6ba7 --- /dev/null +++ b/src/views/search_list_view.js @@ -0,0 +1,45 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import SearchView from '../views/search_view'; +import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; + + +const SearchListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#results').empty(); + console.log("in search render") + console.log(this) + this.model.each((movie) => { + const searchView = new SearchView ({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie' + }); + + this.$('#results').append(searchView.render().$el); + }); // end of each loop + return this; + }, // end of render + events: { + 'submit #search-form': 'getRequest', + }, + getRequest: function (e) { + console.log("YOU HIT THE BUTTON!"); + e.preventDefault(); + const searchParams = this.$('#searchParams').val(); + const returnedList = new MovieList(); + returnedList.searchUrl(searchParams); + returnedList.fetch(); + console.log(returnedList) + returnedList.render(); + }, + +}); // end MovieListView + +export default SearchListView; diff --git a/src/views/search_view.js b/src/views/search_view.js new file mode 100644 index 000000000..d9bb80725 --- /dev/null +++ b/src/views/search_view.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; + +const SearchView = Backbone.View.extend({ + initialize(params) { + this.searchTemplate = params.searchTemplate; + this.listenTo(this.model, "change", this.render); + }, + render() { + const compiledTemplate = this.searchTemplate(this.model.toJSON()); + this.$el.html(compiledTemplate); + console.log('in search model') + console.log(this) + return this; + }, + +}); + +export default SearchView; From f8ea29b6b8bec932936be8e6f46919f906d04941 Mon Sep 17 00:00:00 2001 From: Maria McGrew Date: Tue, 19 Dec 2017 17:21:27 -0800 Subject: [PATCH 10/13] fixed get results event function --- src/app.js | 19 ++++++++++++--- src/collections/movie_list.js | 5 ---- src/views/movie_list_view.js | 46 +++++++++++++++++------------------ src/views/search_list_view.js | 9 +------ src/views/search_view.js | 6 +++-- 5 files changed, 44 insertions(+), 41 deletions(-) diff --git a/src/app.js b/src/app.js index c3a63b8a0..4b596415d 100644 --- a/src/app.js +++ b/src/app.js @@ -40,7 +40,20 @@ import SearchView from 'views/search_view'; // end of const - + const data = [ + { + title: 'HUMOR', + }, + { + title: 'FISHES', + }, + { + title: 'SADNESS', + }, + { + title: 'POSITIVITY', + }, + ]; // ready to go $(document).ready(function() { @@ -50,14 +63,14 @@ import SearchView from 'views/search_view'; template: _.template($('#movie-template').html()), el: 'main' }); - const results = new MovieList(); + const results = new MovieList(); const searchListView = new SearchListView({ model: results, template: _.template($('#return-template').html()), el: 'main' }); // movieListView.render(); - // searchListView.render(); + searchListView.render(); // searchReturns.render(); // $('.list_movies').click(allMovieList); // $('#search-form').submit(searchDbList); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js index 08dbf58a2..a499269d1 100644 --- a/src/collections/movie_list.js +++ b/src/collections/movie_list.js @@ -7,11 +7,6 @@ const MovieList = Backbone.Collection.extend({ parse(response) { return response; }, - searchUrl: function(searchTerm){ - this.url = this.url + "?query=" + searchTerm; - console.log(this.url); - return this; - } }); export default MovieList; diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index c9383b6e5..61877cbf3 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -29,34 +29,34 @@ const MovieListView = Backbone.View.extend({ }, // end of render events: { 'click button.api-movies': 'getMovies', - 'submit #search-form': 'getRequest', + // 'submit #search-form': 'getRequest', }, getMovies: function (e) { this.model.fetch(); }, - getRequest: function (e) { - console.log("YOU HIT THE BUTTON!"); - e.preventDefault(); - const searchParams = this.$('#searchParams').val(); - const returnedList = new MovieList(); - returnedList.searchUrl(searchParams); - returnedList.fetch(); - console.log("THIS IS returnedList"); - console.log(returnedList); - this.$('#movies').empty(); - // this.model.fetch(); - returnedList.each((movie) => { - const movieView = new MovieView ({ - model: movie, - searchTemplate: this.searchTemplate, - tagName: 'li', - className: 'movie' - }); - const seeSearchTemp = this.searchTemplate(returnedList); - this.$('#results').prepend(seeSearchTemp); - }); - }, + // getRequest: function (e) { + // console.log("YOU HIT THE BUTTON!"); + // e.preventDefault(); + // const searchParams = this.$('#searchParams').val(); + // const returnedList = new MovieList(); + // returnedList.searchUrl(searchParams); + // returnedList.fetch(); + // console.log("THIS IS returnedList"); + // console.log(returnedList); + // this.$('#movies').empty(); + // // this.model.fetch(); + // returnedList.each((movie) => { + // const movieView = new MovieView ({ + // model: movie, + // searchTemplate: this.searchTemplate, + // tagName: 'li', + // className: 'movie' + // }); + // const seeSearchTemp = this.searchTemplate(returnedList); + // this.$('#results').prepend(seeSearchTemp); + // }); + // }, }); // end MovieListView diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index c3ced6ba7..e46b6fc6c 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -12,8 +12,6 @@ const SearchListView = Backbone.View.extend({ }, render() { this.$('#results').empty(); - console.log("in search render") - console.log(this) this.model.each((movie) => { const searchView = new SearchView ({ model: movie, @@ -30,14 +28,9 @@ const SearchListView = Backbone.View.extend({ 'submit #search-form': 'getRequest', }, getRequest: function (e) { - console.log("YOU HIT THE BUTTON!"); e.preventDefault(); const searchParams = this.$('#searchParams').val(); - const returnedList = new MovieList(); - returnedList.searchUrl(searchParams); - returnedList.fetch(); - console.log(returnedList) - returnedList.render(); + this.model.fetch({data: {query: searchParams}}); }, }); // end MovieListView diff --git a/src/views/search_view.js b/src/views/search_view.js index d9bb80725..4811b262a 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -4,11 +4,13 @@ import MovieList from '../collections/movie_list'; const SearchView = Backbone.View.extend({ initialize(params) { - this.searchTemplate = params.searchTemplate; + this.template = params.template; this.listenTo(this.model, "change", this.render); }, render() { - const compiledTemplate = this.searchTemplate(this.model.toJSON()); + console.log("THIS IS SVIEW"); + console.log(this); + const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); console.log('in search model') console.log(this) From 1f5d05062f1b215e06fd9a5a759cde8b449fdca6 Mon Sep 17 00:00:00 2001 From: Sara C Date: Wed, 20 Dec 2017 09:29:47 -0800 Subject: [PATCH 11/13] starting merge --- src/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.js b/src/app.js index c3a63b8a0..1f84a132b 100644 --- a/src/app.js +++ b/src/app.js @@ -50,7 +50,7 @@ import SearchView from 'views/search_view'; template: _.template($('#movie-template').html()), el: 'main' }); - const results = new MovieList(); + const results = new MovieList(); const searchListView = new SearchListView({ model: results, template: _.template($('#return-template').html()), From 731906604eec40b3edb552c3232c62a5df9cd86f Mon Sep 17 00:00:00 2001 From: Sara C Date: Wed, 20 Dec 2017 13:15:17 -0800 Subject: [PATCH 12/13] adding movie to list works --- dist/index.html | 4 +++- src/views/search_list_view.js | 13 +++++++++++++ src/views/search_view.js | 9 +++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index e9d796340..5919ae7b1 100644 --- a/dist/index.html +++ b/dist/index.html @@ -20,6 +20,7 @@

    Video Store

    All the Searched Movies!

      +
    @@ -37,7 +38,8 @@

    <%- title %>

    diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index e46b6fc6c..d49b56e5e 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -32,6 +32,19 @@ const SearchListView = Backbone.View.extend({ const searchParams = this.$('#searchParams').val(); this.model.fetch({data: {query: searchParams}}); }, + // addMovie: function(e) { + // e.preventDefault(); + // const id = $(e.currentTarget).data("external_id"); + // console.log(id) + // const movie = this.model.get(id) + // movie.save(); + // this.model.each((movie) => { + // console.log(movie); + // console.log(movie.attributes.title) + // const newMovie = movie.attributes + // newMovie.save(); + // }); + // }, }); // end MovieListView diff --git a/src/views/search_view.js b/src/views/search_view.js index 4811b262a..9212fc126 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -16,6 +16,15 @@ const SearchView = Backbone.View.extend({ console.log(this) return this; }, + events: { + 'click button.add': 'addMovie', + }, + addMovie: function(e) { + e.preventDefault(); + // const newMovie = this.model.attributes; + this.model.save(); + + } }); From 84e2848950cf05de003095cc1e9890a820e7c584 Mon Sep 17 00:00:00 2001 From: Sara C Date: Wed, 20 Dec 2017 13:34:02 -0800 Subject: [PATCH 13/13] cleaned up extra code --- dist/index.html | 4 +-- src/app.js | 49 +---------------------------------- src/views/movie_list_view.js | 27 +------------------ src/views/search_list_view.js | 15 +---------- src/views/search_view.js | 7 +---- 5 files changed, 6 insertions(+), 96 deletions(-) diff --git a/dist/index.html b/dist/index.html index 5919ae7b1..04ca6a7d6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -38,8 +38,8 @@

    <%- title %>

    diff --git a/src/app.js b/src/app.js index 4b596415d..7b562fcc9 100644 --- a/src/app.js +++ b/src/app.js @@ -12,50 +12,6 @@ import MovieListView from 'views/movie_list_view'; import SearchListView from 'views/search_list_view'; import SearchView from 'views/search_view'; - // const allMovieList = function(event){ - // const movies = new MovieList(); - // movies.fetch(); - // - // const movieListView = new MovieListView({ - // model: movies, - // template: _.template($('#movie-template').html()), - // el: 'main' - // }); // end of const - // movieListView.render(); - // }; - // - // const searchDbList = function(event){ - // event.preventDefault(); - // const searchParams = $('#searchParams').val(); - // - - // const returnedList = new MovieList(); - // returnedList.searchUrl(searchParams); - // returnedList.fetch(); - // const searchReturns = new MovieListView({ - // model: returnedList, - // template: _.template($('#return-template').html()), - // el: 'main' - // }); - - - // end of const - const data = [ - { - title: 'HUMOR', - }, - { - title: 'FISHES', - }, - { - title: 'SADNESS', - }, - { - title: 'POSITIVITY', - }, - ]; - - // ready to go $(document).ready(function() { const movies = new MovieList(); const movieListView = new MovieListView({ @@ -69,9 +25,6 @@ import SearchView from 'views/search_view'; template: _.template($('#return-template').html()), el: 'main' }); - // movieListView.render(); + movieListView.render(); searchListView.render(); - // searchReturns.render(); - // $('.list_movies').click(allMovieList); - // $('#search-form').submit(searchDbList); }); diff --git a/src/views/movie_list_view.js b/src/views/movie_list_view.js index 61877cbf3..632238d7a 100644 --- a/src/views/movie_list_view.js +++ b/src/views/movie_list_view.js @@ -13,7 +13,6 @@ const MovieListView = Backbone.View.extend({ }, render() { this.$('#movies').empty(); - // this.model.fetch(); this.model.each((movie) => { const movieView = new MovieView ({ model: movie, @@ -28,36 +27,12 @@ const MovieListView = Backbone.View.extend({ return this; }, // end of render events: { - 'click button.api-movies': 'getMovies', - // 'submit #search-form': 'getRequest', + 'click button.api-movies': 'getMovies' }, getMovies: function (e) { this.model.fetch(); }, - // getRequest: function (e) { - // console.log("YOU HIT THE BUTTON!"); - // e.preventDefault(); - // const searchParams = this.$('#searchParams').val(); - // const returnedList = new MovieList(); - // returnedList.searchUrl(searchParams); - // returnedList.fetch(); - // console.log("THIS IS returnedList"); - // console.log(returnedList); - // this.$('#movies').empty(); - // // this.model.fetch(); - // returnedList.each((movie) => { - // const movieView = new MovieView ({ - // model: movie, - // searchTemplate: this.searchTemplate, - // tagName: 'li', - // className: 'movie' - // }); - // const seeSearchTemp = this.searchTemplate(returnedList); - // this.$('#results').prepend(seeSearchTemp); - // }); - // }, - }); // end MovieListView export default MovieListView; diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js index d49b56e5e..328586d3e 100644 --- a/src/views/search_list_view.js +++ b/src/views/search_list_view.js @@ -32,20 +32,7 @@ const SearchListView = Backbone.View.extend({ const searchParams = this.$('#searchParams').val(); this.model.fetch({data: {query: searchParams}}); }, - // addMovie: function(e) { - // e.preventDefault(); - // const id = $(e.currentTarget).data("external_id"); - // console.log(id) - // const movie = this.model.get(id) - // movie.save(); - // this.model.each((movie) => { - // console.log(movie); - // console.log(movie.attributes.title) - // const newMovie = movie.attributes - // newMovie.save(); - // }); - // }, - + }); // end MovieListView export default SearchListView; diff --git a/src/views/search_view.js b/src/views/search_view.js index 9212fc126..7af3a44d5 100644 --- a/src/views/search_view.js +++ b/src/views/search_view.js @@ -8,12 +8,8 @@ const SearchView = Backbone.View.extend({ this.listenTo(this.model, "change", this.render); }, render() { - console.log("THIS IS SVIEW"); - console.log(this); const compiledTemplate = this.template(this.model.toJSON()); this.$el.html(compiledTemplate); - console.log('in search model') - console.log(this) return this; }, events: { @@ -21,9 +17,8 @@ const SearchView = Backbone.View.extend({ }, addMovie: function(e) { e.preventDefault(); - // const newMovie = this.model.attributes; this.model.save(); - + } });