Current to Part 7 of the blog series - http://brianmajewski.com/2015/…

…02/22/relearning-backbone-part-7/

app/routes/user.js

@@ -49,7 +49,7 @@ module.exports = function (app, express) {
                 if (err) res.send(err);
 
                 if (req.body.name) user.name = req.body.name;
-                if (req.body.username) user.username = req.body.username;
+                if (req.body.email) user.email = req.body.email;
                 if (req.body.password) user.password = req.body.password;
 
                 user.save(function (err) {

bower.json

@@ -21,6 +21,9 @@
     "jquery": "~2.1.3",
     "handlebars": "~3.0.0",
     "requirejs-text": "~2.0.14",
-    "require-handlebars-plugin": "~0.11.2"
+    "require-handlebars-plugin": "~0.11.2",
+    "font-awesome": "~4.3.0",
+    "datatables": "~1.10.5",
+    "datatables-bootstrap3-plugin": "~0.3.0"
   }
 }

public/app/page/headerTemplate.hbs

@@ -4,6 +4,9 @@
             <div class="navbar-header">
                 <a href="/" class="navbar-brand"><b>relearning backbone</b></a>
             </div>
+            <ul class="nav navbar-nav">
+                <li><a href="#users"><span class="fa fa-users"></span> Users</a></li>
+            </ul>
             <ul class="nav navbar-nav navbar-right">
                 [Navigation Elements]
             </ul>

public/app/router.js

@@ -15,7 +15,18 @@ define(function (require) {
 
         routes: {
             '': 'home',
-            'home': 'home'
+            'home': 'home',
+            'users': 'users'
+        },
+
+        users: function() {
+            console.log('routing - users');
+            require(['users/collection', 'users/listView'], function(Collection, View) {
+                var collection = new Collection();
+                collection.fetch().done(function(){
+                    mediator.trigger('page:displayView', new View({collection: collection}));
+                });
+            });
         },
 
         home: function () {

public/app/users/collection.js

@@ -0,0 +1,11 @@
+define(function (require) {
+
+    'use strict';
+    var Backbone = require('backbone');
+    var Model = require('users/model');
+
+    return Backbone.Collection.extend({
+        model: Model,
+        url: '/api/users'
+    });
+});

public/app/users/list.hbs

@@ -0,0 +1,19 @@
+<div class="well">
+    <h4><b>Users</b></h4>
+</div>
+<table class="table table-bordered table-striped">
+    <thead>
+    <th>ID</th>
+    <th>Email</th>
+    <th>Name</th>
+    </thead>
+    <tbody>
+    {{#each users}}
+        <tr>
+            <td>{{_id}}</td>
+            <td>{{email}}</td>
+            <td>{{name}}</td>
+        </tr>
+    {{/each}}
+    </tbody>
+</table>

public/app/users/listView.js

@@ -0,0 +1,18 @@
+define(function (require) {
+
+    'use strict';
+    var Backbone = require('backbone');
+    var template = require('hbs!users/list');
+    require('datatables');
+    require('datatables-bootstrap3');
+
+    return Backbone.View.extend({
+        el: '#content',
+        render: function(){
+            this.$el.html(template({users: this.collection.toJSON()}));
+            this.$('table').DataTable();
+            return this;
+        }
+    });
+
+});

public/app/users/model.js

@@ -0,0 +1,11 @@
+define(function (require) {
+
+    'use strict';
+    var Backbone = require('backbone');
+
+    return Backbone.Model.extend({
+        idAttribute: '_id',
+        urlRoot: '/api/users'
+    });
+
+});

public/index.html

@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <title>Relearning Backbone</title>
     <link rel="stylesheet" href="assets/css/bootstrap-lumen.min.css">
+    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.css">
+    <link rel="stylesheet" href="components/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css">
 
     <script src="components/requirejs/require.js" data-main="require-main.js"></script>
 </head>

public/require-main.js

@@ -7,7 +7,9 @@ requirejs.config({
         "backbone": "../components/backbone/backbone",
         "handlebars": "../components/handlebars/handlebars.amd",
         "text": "../components/requirejs-text/text",
-        "hbs": "../components/require-handlebars-plugin/hbs"
+        "hbs": "../components/require-handlebars-plugin/hbs",
+        "datatables": "../components/datatables/media/js/jquery.dataTables",
+        "datatables-bootstrap3": "../components/datatables-bootstrap3-plugin/media/js/datatables-bootstrap3"
     }
 });