simple browse directory with "sort by" functionality

css/styles.css

@@ -19,3 +19,47 @@ body {
 .no-reports {
     display: none;
 }
+
+/**
+ * [START] Browse directory
+*/
+
+#browseList ul {
+    margin-left: 0;
+    list-style-type: none;
+}
+
+#browseList li {
+    background-color: #f7f7f7;
+    margin: 10px 0;
+}
+
+#browseList li:hover {
+    background-color: #0081c2;
+    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+}
+
+#browseList li a {
+    display: block;
+    padding: 10px;
+}
+
+#browseList li a:hover {
+    text-decoration: none;
+    color: #ffffff;
+}
+
+#browseList li p {
+    margin: 0;
+    padding-bottom: 4px;
+}
+
+/**
+ * [END] Browse directory
+*/

index.html

@@ -33,6 +33,7 @@
 <script src="js/app.js"></script>
 <script src="js/views/shell.js"></script>
 <script src="js/views/home.js"></script>
+<script src="js/views/browse.js"></script>
 <script src="js/views/contact.js"></script>
 <script src="js/views/employeelist.js"></script>
 <script src="js/views/employeedetails.js"></script>

js/app.js

@@ -27,6 +27,7 @@ directory.Router = Backbone.Router.extend({
 
     routes: {
         "":                 "home",
+        "browse":           "browse",
         "contact":          "contact",
         "employees/:id":    "employeeDetails"
     },
@@ -54,6 +55,17 @@ directory.Router = Backbone.Router.extend({
         directory.shellView.selectMenuItem('home-menu');
     },
 
+    browse: function () {
+        if (!directory.browseView) {
+            directory.browseView = new directory.BrowseView();
+            directory.browseView.render();
+        } else {
+            directory.browseView.delegateEvents();
+        }
+        this.$content.html(directory.browseView.el);
+        directory.shellView.selectMenuItem('browse-menu');
+    },
+
     contact: function () {
         if (!directory.contactView) {
             directory.contactView = new directory.ContactView();
@@ -80,7 +92,7 @@ directory.Router = Backbone.Router.extend({
 });
 
 $(document).on("ready", function () {
-    directory.loadTemplates(["HomeView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"],
+    directory.loadTemplates(["HomeView", "BrowseView", "ContactView", "ShellView", "EmployeeView", "EmployeeSummaryView", "EmployeeListItemView"],
         function () {
             directory.router = new directory.Router();
             Backbone.history.start();

js/views/browse.js

@@ -0,0 +1,29 @@
+directory.BrowseView = Backbone.View.extend({
+
+    initialize: function () {
+        this.employees = new directory.EmployeeCollection();
+        this.sortBy = 'firstName';
+        this.employees.comparator = this.sortBy;
+        this.employees.fetch({reset: true, data: {name: ''}});
+        this.listView = new directory.EmployeeListView({model: this.employees, className: 'browse-list'});
+        this.employees.on('sort', this.render, this);
+    },
+
+    render: function () {
+        this.$el.html(this.template());
+        $("#sortBy").val(this.sortBy);
+        $("#browseList", this.el).html(this.listView.render().el);
+        return this;
+    },
+
+    events: {
+        "change #sortBy":"sort"
+    },
+
+    sort: function() {
+        this.sortBy = $("#sortBy").val();
+        this.employees.comparator = this.sortBy;
+        this.employees.sort();
+    }
+
+});

tpl/BrowseView.html

@@ -0,0 +1,10 @@
+<form class="form-inline">
+    <label for="sortBy">Sort by: </label>&nbsp;
+    <select id="sortBy">
+        <option value="firstName">First Name</option>
+        <option value="lastName">Last Name</option>
+    </select>
+</form>
+
+<div id="browseList">
+</div>

tpl/ShellView.html

@@ -11,6 +11,7 @@
             <div class="nav-collapse collapse">
                 <ul class="nav">
                     <li class="home-menu active"><a href="#">Home</a></li>
+                    <li class="browse-menu"><a href="#browse">Browse</a></li>
                     <li class="contact-menu"><a href="#contact">Contact</a></li>
                 </ul>
                 <form class="navbar-search pull-right dropdown">