diff --git a/build/index.html b/build/index.html index 03869595f..e1b06dbf0 100644 --- a/build/index.html +++ b/build/index.html @@ -1,5 +1,6 @@ +
@@ -9,7 +10,31 @@ - + + +
+ - +
+ + + + + + + diff --git a/src/app.js b/src/app.js index 58b77997c..e0d22721d 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 -$(document).ready(function() { +import RentalLibrary from './collections/rentalLibrary'; +import RentalLibraryView from './views/rentalLibraryView'; + + +var rentalList = new RentalLibrary(); +rentalList.fetch(); + +var libraryView = new RentalLibraryView({ - $('section.main-content').append('

Hello World!

'); + model: rentalList, + template: _.template($('#movie-card-template').html()), + el: 'main' +}); + + + +$(document).ready(function() { +libraryView.render(); + }); 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; diff --git a/src/collections/searchResults.js b/src/collections/searchResults.js new file mode 100644 index 000000000..1dbc316cd --- /dev/null +++ b/src/collections/searchResults.js @@ -0,0 +1,10 @@ +import Backbone from 'backbone'; +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 new file mode 100644 index 000000000..5979af6d7 --- /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; diff --git a/src/views/movieView.js b/src/views/movieView.js new file mode 100644 index 000000000..bb9e80417 --- /dev/null +++ b/src/views/movieView.js @@ -0,0 +1,40 @@ +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: { + "click #Add-to-library": "add", + + }, + + add: function(){ + console.log(this.model); + this.model.save(); + } + + + + +}); + + + +export default MovieView; diff --git a/src/views/rentalLibraryView.js b/src/views/rentalLibraryView.js new file mode 100644 index 000000000..97851d726 --- /dev/null +++ b/src/views/rentalLibraryView.js @@ -0,0 +1,57 @@ +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 +import $ from 'jquery'; + +//for initializing any backbone view: + +var RentalLibraryView = 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: { + "click #search": "search", + "click #logo": "render" + }, + + 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, + template: _.template($('#new-movie-card-template').html()), + el: 'main' + }); + }, +}); + +export default RentalLibraryView; diff --git a/src/views/searchResultsView.js b/src/views/searchResultsView.js new file mode 100644 index 000000000..981629e2d --- /dev/null +++ b/src/views/searchResultsView.js @@ -0,0 +1,37 @@ +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 SearchResultsView = Backbone.View.extend({ + + initialize: function(params){ + this.template = params.template; + this.listenTo(this.model, 'update', this.render); + }, + + 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;