Ada-C8 · galestorm · Dec 18, 2017 · Dec 18, 2017 · Dec 19, 2017 · Dec 19, 2017
diff --git 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
@@ -5,10 +5,44 @@
     <title>Backbone Baseline</title>
   </head>
   <body>
+    <header>
+      <h1>BACKBONE BASELINE RENTAL LIBRARY</h1>
+    </header>
     <main id="main-content">
-
+      <section id="search">
+          <h3>Search for Movies:</h3>
+          <form>
+            <input type="text" name="search" placeholder="Search for a movie..."/>
+            <button class="button" type="submit" id="search-btn">Search</button>
+          </form>
+        <div id="results-container">
+          <h3>DATABASE RESULTS</h3>
+          <ul id="results-list"><!-- result-list-template renders here-->
+          </ul>
+        </div>
+      </section>
+      <section id="library">
+        <h3>RENTAL LIBRARY</h3>
+        <ul id="movie-list"><!-- library-template renders here--></ul>
+      </section>
     </main>
 
+    <!-- UNDERSCORE TEMPLATES -->
+
+    <script type="text/template" id="result-list-template">
+      <img src="<%- image_url %>" />
+      <%- title %>
+      <%- release_date %>
+      <button class="button" id="add-btn">Add to Library</button>
+    </script>
+
+    <script type="text/template" id="library-template">
+      <img src="<%- image_url %>" />
+      <%- title %>
+      <%- release_date %>
+    </script>
+
+    <!-- INCLUDES -->
     <script src="/app.bundle.js"></script>
 
   </body>

diff --git 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('<p>Hello World!</p>');
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    .env
     # From https://github.com/github/gitignore/blob/master/Node.gitignore
     # Logs
     logs
@@ Expand Down @@