Hello World!
'); + moviesView.render(); }); diff --git a/src/collections/db_movies.js b/src/collections/db_movies.js new file mode 100644 index 000000000..aedfd07a1 --- /dev/null +++ b/src/collections/db_movies.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import DBMovie from '../models/db_movie.js'; + +var DBMovies = Backbone.Collection.extend({ + model: DBMovie, + url: 'http://localhost:3000/movies' +}); + +export default DBMovies; diff --git a/src/collections/movies.js b/src/collections/movies.js new file mode 100644 index 000000000..923253955 --- /dev/null +++ b/src/collections/movies.js @@ -0,0 +1,11 @@ +// collection - movies.js +import Backbone from 'backbone'; + +import Movie from '../models/movie.js'; + +var Movies = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies' +}); + +export default Movies; diff --git a/src/models/db_movie.js b/src/models/db_movie.js new file mode 100644 index 000000000..1f93c2a49 --- /dev/null +++ b/src/models/db_movie.js @@ -0,0 +1,13 @@ +import Backbone from 'backbone'; + +var DBMovie = Backbone.Model.extend({ + defaults: { + title: '', + overview: '', + release_date: '', + image_url: '', + external_id: '' + }, +}); + +export default DBMovie; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..1c04ca13b --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,22 @@ +import Backbone from 'backbone'; + +var Movie = Backbone.Model.extend({ + defaults: { + title: '', + overview: '', + release_date: '', + image_url: '', + external_id: '' + }, + // logStatus: function() { + // console.log('Model ' + this.cid); + // console.log('Title ' + this.get('title')); + // console.log('Inventory ' + this.get('inventory')); + // }, + // initialize: function(params) { + // console.log('Starting ', params); + // this.logStatus(); + // } +}); + +export default Movie; diff --git a/src/views/db_movie_view.js b/src/views/db_movie_view.js new file mode 100644 index 000000000..0c981ade8 --- /dev/null +++ b/src/views/db_movie_view.js @@ -0,0 +1,38 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import DBMovie from '../models/db_movie.js'; +import Movie from '../models/movie.js'; + + +var DBMovieView = 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()); + this.$el.html(compiledTemplate); + return this; + }, + events: { + 'click #add-button' : 'createMovie' + }, + formatForMovie: function() { + return { + title: this.model.attributes.title, + overview: this.model.attributes.overview, + release_date: this.model.attributes.release_date, + image_url: this.model.attributes.image_url, + external_id: this.model.attributes.external_id + }; + }, + createMovie: function() { + event.preventDefault(); + var movie = new Movie(this.formatForMovie()); + this.trigger('created', movie); + } +}); + +export default DBMovieView; diff --git a/src/views/db_movies_view.js b/src/views/db_movies_view.js new file mode 100644 index 000000000..d2912b2d7 --- /dev/null +++ b/src/views/db_movies_view.js @@ -0,0 +1,52 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import DBMovieView from './db_movie_view.js'; +import DBMovie from '../models/db_movie.js'; +import Movies from '../collections/movies.js'; + + +var DBMoviesView = Backbone.View.extend({ + initialize: function( params ) { + this.template = params.stockTemplate; + this.movies = params.movies + this.listenTo(this.model, 'update', this.render); + }, + render: function() { + + this.$( '#movie-results' ).empty(); + + var that = this; + + this.model.each(function( dbMovie ) { + var dbMovieView = new DBMovieView({ + model: dbMovie, + template: that.template + }); + + that.listenTo(dbMovieView,'created', that.addMovie); + that.$('#movie-results').append( dbMovieView.render().$el ); + }); + return this; + }, + events: { + 'click #search-button' : 'searchMovie', + }, + getFormSearch: function() { + var formQuery = this.$('#query').val(); + this.$('#query').val(''); + return formQuery; + }, + searchMovie: function() { + event.preventDefault(); + this.model.fetch({ + data: {query: this.getFormSearch()} + }); + }, + addMovie: function(movie) { + this.movies.create(movie); + } +}); + +export default DBMoviesView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..ab11672ca --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,19 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import Movie from '../models/movie.js'; + +var MovieView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.template; // TODO: double check name of this template + this.listenTo(this.model, 'change', this.render); + }, + render: function() { + var compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + } +}); + +export default MovieView; diff --git a/src/views/movies_view.js b/src/views/movies_view.js new file mode 100644 index 000000000..9bbb23ed3 --- /dev/null +++ b/src/views/movies_view.js @@ -0,0 +1,49 @@ +import Backbone from 'backbone'; +import _ from 'underscore'; +import $ from 'jquery'; + +import MovieView from './movie_view.js'; +import Movie from '../models/movie.js'; +import DBMoviesView from './db_movies_view.js'; +import DBMovies from '../collections/db_movies.js'; +import DBMovie from '../models/db_movie.js'; + + +var MoviesView = Backbone.View.extend({ + initialize: function(params) { + this.template = params.resultTemplate; + this.detailsTemplate = params.stockTemplate; + this.dbMovies = new DBMovies(); + + this.dbMoviesView = new DBMoviesView({ + movies: this.model, + model: this.dbMovies, + stockTemplate: _.template($('#db-movie-template').html(), {variable: 'movie'}), + el: '#db-movies' + }); + + this.model.fetch(); + + this.listenTo(this.model, 'update', this.render); + + }, + render: function() { + console.log("test"); + this.$('#movie-results').empty(); + this.$('#movies-stocked').empty(); + var that = this; + + this.model.each(function(movie) { + var movieView = new MovieView({ + model: movie, + template: that.template + }); + + that.$('#movies-stocked').append(movieView.render().$el); + }); + + return this; + } +}); + +export default MoviesView;