Video Store
+All the Searched Movies!
+
+
+
+ -
+
+
All the Movies!
+ +
+
+
-
+
Hello World!
'); - -}); + $(document).ready(function() { + const movies = new MovieList(); + const movieListView = new MovieListView({ + model: movies, + template: _.template($('#movie-template').html()), + el: 'main' + }); + const results = new MovieList(); + const searchListView = new SearchListView({ + model: results, + template: _.template($('#return-template').html()), + el: 'main' + }); + movieListView.render(); + searchListView.render(); + }); diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js new file mode 100644 index 000000000..a499269d1 --- /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; + }, +}); + +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..632238d7a --- /dev/null +++ b/src/views/movie_list_view.js @@ -0,0 +1,38 @@ +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) { + this.template = params.template; + this.searchTemplate = params.searchTemplate; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#movies').empty(); + this.model.each((movie) => { + const movieView = new MovieView ({ + model: movie, + template: this.template, + searchTemplate: this.searchTemplate, + tagName: 'li', + className: 'movie' + }); + + this.$('#movies').append(movieView.render().$el); + }); // end of each loop + return this; + }, // end of render + events: { + 'click button.api-movies': 'getMovies' + }, + getMovies: function (e) { + this.model.fetch(); + }, + +}); // 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..b3689c015 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,20 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +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() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + + return this; + }, + +}); + +export default MovieView; diff --git a/src/views/search_list_view.js b/src/views/search_list_view.js new file mode 100644 index 000000000..328586d3e --- /dev/null +++ b/src/views/search_list_view.js @@ -0,0 +1,38 @@ +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(); + 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) { + e.preventDefault(); + const searchParams = this.$('#searchParams').val(); + this.model.fetch({data: {query: searchParams}}); + }, + +}); // 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..7af3a44d5 --- /dev/null +++ b/src/views/search_view.js @@ -0,0 +1,26 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; +import MovieList from '../collections/movie_list'; + +const SearchView = 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; + }, + events: { + 'click button.add': 'addMovie', + }, + addMovie: function(e) { + e.preventDefault(); + this.model.save(); + + } + +}); + +export default SearchView;