display contacts as unordered list

index.html

@@ -21,7 +21,7 @@
       <p>Here is static content in the web page. You'll notice that it gets replaced by our app as soon as we start it.</p>
     </div>
 
-    <script type="text/template" id="contact-template">
+    <script type="text/template" id="contact-list-item">
       <p><%= firstName %> <%= lastName %></p>
     </script>
 
@@ -40,22 +40,44 @@
 
       ContactManager.Contact = Backbone.Model.extend({});
 
-      ContactManager.ContactView = Marionette.ItemView.extend({
-        template: "#contact-template"
+      ContactManager.ContactCollection = Backbone.Collection.extend({
+        model: ContactManager.Contact
+      });
+
+      ContactManager.ContactItemView = Marionette.ItemView.extend({
+        tagName: "li",
+        template: "#contact-list-item"
+      });
+
+      ContactManager.ContactsView = Marionette.CollectionView.extend({
+        tagName: "ul",
+        itemView: ContactManager.ContactItemView
       });
 
       ContactManager.on("initialize:after", function(){
-        var alice = new ContactManager.Contact({
-          firstName: "Alice",
-          lastName: "Arten",
-          phoneNumber: "555-0184"
-        });
+        var contacts = new ContactManager.ContactCollection([
+          {
+            firstName: "Bob",
+            lastName: "Brigham",
+            phoneNumber: "555-0163"
+          },
+          {
+            firstName: "Alice",
+            lastName: "Arten",
+            phoneNumber: "555-0184"
+          },
+          {
+            firstName: "Charlie",
+            lastName: "Campbell",
+            phoneNumber: "555-0129"
+          }
+        ]);
 
-        var aliceView = new ContactManager.ContactView({
-          model: alice
+        var contactsView = new ContactManager.ContactsView({
+          collection: contacts
         });
 
-        ContactManager.mainRegion.show(aliceView);
+        ContactManager.mainRegion.show(contactsView);
       });
 
       ContactManager.start();