Rename files

dist/index.html

@@ -11,15 +11,15 @@ <h3>SEARCH FORM COMING SOON!</h3>
       </section>
       <section id="results-container">
         <h3>DATABASE RESULTS</h3>
-        <ul id="results"><!-- result-template renders here--></ul>
       </section>
-      <section id="movie-list">
-        <h3>RENTAL LIBRARY COMING SOON!</h3>
+      <section id="library">
+        <h3>RENTAL LIBRARY</h3>
+        <ul id="movie-list"><!-- result-template renders here--></ul>
       </section>
     </main>
 
     <!-- UNDERSCORE TEMPLATES -->
-    <script type="text/template" id="result-template">
+    <script type="text/template" id="library-template">
       <img src="<%- image_url %>" /><%- title %>
     </script>
 

src/app.js

@@ -1,28 +1,29 @@
-import 'css/_settings.css';
-import 'foundation-sites/dist/css/foundation.css';
-import './css/styles.css';
-
 // 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';
+
 // Models & Collections
-import ResultList from './collections/result_list';
-import ResultListView from './views/result_list_view';
+import Library from './collections/library';
+import LibraryView from './views/library_view';
 
 
-const resultList = new ResultList();
+const library = new Library();
 
 // ready to go
 $(document).ready(function() {
-  resultList.fetch();
+  library.fetch();
 
-  const resultListView = new ResultListView({
-    model: resultList,
-    template: _.template($('#result-template').html()),
-    el: '#results-container',
+  const libraryView = new LibraryView({
+    model: library,
+    template: _.template($('#library-template').html()),
+    el: '#library',
   });
-  
-  resultListView.render();
+
+  libraryView.render();
 
 });

src/collections/result_list.js → src/collections/library.js

@@ -1,9 +1,9 @@
 import Backbone from 'backbone';
 import Movie from '../models/movie';
 
-const ResultList = Backbone.Collection.extend({
+const Library= Backbone.Collection.extend({
   model: Movie,
   url: 'http://localhost:3000/movies',
 });
 
-export default ResultList;
+export default Library;

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;

src/views/result_view.js → src/views/movie_view.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 
-const ResultView = Backbone.View.extend({
+const MovieView = Backbone.View.extend({
   initialize(params) {
     this.template = params.template;
     this.model = params.model;
@@ -12,4 +12,4 @@ const ResultView = Backbone.View.extend({
   },
 });
 
-export default ResultView;
+export default MovieView;