diff --git a/.gitignore b/.gitignore index a360e4d75..9646f9a60 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.env + # From https://github.com/github/gitignore/blob/master/Node.gitignore # Logs logs diff --git a/dist/index.html b/dist/index.html index 559b18ecd..f74adcc60 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,10 +5,44 @@ Backbone Baseline +
+

BACKBONE BASELINE RENTAL LIBRARY

+
- + +
+

RENTAL LIBRARY

+ +
+ + + + + + + diff --git a/src/app.js b/src/app.js index 30c00d594..bfddad095 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,41 @@ +import Backbone from 'backbone'; +// Import jQuery & Underscore +import $ from 'jquery'; +import _ from 'underscore'; + +//Styles import 'css/_settings.css'; import 'foundation-sites/dist/css/foundation.css'; import './css/styles.css'; -// Import jQuery & Underscore -import $ from 'jquery'; -import _ from 'underscore'; +// Models & Collections +import Library from './collections/library'; +import LibraryView from './views/library_view'; +import ResultList from './collections/result_list'; +import ResultListView from './views/result_list_view'; + + +const library = new Library(); +const resultList = new ResultList(); +const bus = _.extend({}, Backbone.Events); // ready to go $(document).ready(function() { + library.fetch(); + + const libraryView = new LibraryView({ + model: library, + template: _.template($('#library-template').html()), + bus: bus, + el: '#library', + }); - $('#main-content').append('

Hello World!

'); + libraryView.render(); + const resultListView = new ResultListView({ + model: resultList, + template: _.template($('#result-list-template').html()), + el: '#search', + library: library, + }) }); diff --git a/src/collections/library.js b/src/collections/library.js new file mode 100644 index 000000000..46de85539 --- /dev/null +++ b/src/collections/library.js @@ -0,0 +1,9 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const Library = Backbone.Collection.extend({ + model: Movie, + url: 'http://localhost:3000/movies', +}); + +export default Library; diff --git a/src/collections/result_list.js b/src/collections/result_list.js new file mode 100644 index 000000000..0fe19b3cf --- /dev/null +++ b/src/collections/result_list.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; +import Movie from '../models/movie'; + +const ResultList = Backbone.Collection.extend({ + model: Movie, + sync: function(method, model, options) { + options.url = 'http://localhost:3000/movies/search?query=' + this.query; + return Backbone.sync('read', model, options); + } +}); + +export default ResultList; diff --git a/src/css/styles.css b/src/css/styles.css index 68a79a569..92ed076c3 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,6 @@ @include foundation-everything; + main { background: lightblue; } @@ -37,6 +38,10 @@ aside label { div { display: inline; } + +ul, li { + list-style-type: none; +} /* * { border-style: solid; diff --git a/src/models/movie.js b/src/models/movie.js new file mode 100644 index 000000000..f4eb208b8 --- /dev/null +++ b/src/models/movie.js @@ -0,0 +1,8 @@ +import Backbone from 'backbone'; + +const Movie = Backbone.Model.extend({ + urlRoot: 'http://localhost:3000/movies' +}) + + +export default Movie diff --git a/src/views/library_view.js b/src/views/library_view.js new file mode 100644 index 000000000..859cc399c --- /dev/null +++ b/src/views/library_view.js @@ -0,0 +1,26 @@ +import Backbone from 'backbone'; + +import MovieView from './movie_view'; + +const LibraryView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.model = params.model; + this.listenTo(this.model, 'update', this.render); + }, + render() { + this.$('#movie-list').empty(); + this.model.each((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie', + }); + this.$('#movie-list').append(movieView.render().$el); + }); + return this; + } +}); + +export default LibraryView; diff --git a/src/views/movie_view.js b/src/views/movie_view.js new file mode 100644 index 000000000..18ef93d95 --- /dev/null +++ b/src/views/movie_view.js @@ -0,0 +1,23 @@ +import Backbone from 'backbone'; + +const MovieView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.model = params.model; + this.library = params.library; + }, + events: { + 'click #add-btn': 'addToLibrary', + }, + render() { + const compiledTemplate = this.template(this.model.toJSON()); + this.$el.html(compiledTemplate); + return this; + }, + addToLibrary() { + this.library.add(this.model); + this.model.save(); + } +}); + +export default MovieView; diff --git a/src/views/result_list_view.js b/src/views/result_list_view.js new file mode 100644 index 000000000..97e5e3aa7 --- /dev/null +++ b/src/views/result_list_view.js @@ -0,0 +1,36 @@ +import Backbone from 'backbone'; +import MovieView from './movie_view' + +const ResultListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.model = params.model; + this.library = params.library; + this.listenTo(this.model, 'update', this.render); + }, + events: { + 'click #search-btn': 'getResults', + }, + render() { + this.$('#results-list').empty(); + this.model.each((movie) => { + const movieView = new MovieView({ + model: movie, + template: this.template, + tagName: 'li', + className: 'movie', + library: this.library, + }); + this.$('#results-list').append(movieView.render().$el); + }); + return this; + }, + getResults: function(event) { + event.preventDefault(); + const searchTerm = this.$('[name="search"]').val(); + this.model.query = searchTerm + this.model.fetch() + }, +}); + +export default ResultListView;