Skip to content
Permalink
Browse files

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

  • Loading branch information...
bmajewski committed Feb 24, 2015
1 parent c29507a commit 8a19651c576968b29f143d271147b0b288ca63a7
@@ -23,7 +23,7 @@ module.exports = function (app, express) {
return res.send(err);
}
} else {
res.json({message: 'user created'});
res.json(user);
}

});
@@ -54,14 +54,14 @@ module.exports = function (app, express) {

user.save(function (err) {
if (err)res.send(err);
res.json({message: 'user updated'});
res.json(user);
});
});
})
.delete(function (req, res) {
User.remove({_id: req.params.user_id}, function (err, user) {
if (err) res.send(err);
res.json({message: 'user deleted'});
res.json({});
})
});

@@ -24,6 +24,11 @@
"require-handlebars-plugin": "~0.11.2",
"font-awesome": "~4.3.0",
"datatables": "~1.10.5",
"datatables-bootstrap3-plugin": "~0.3.0"
"datatables-bootstrap3-plugin": "~0.3.0",
"backbone.bootstrap-modal": "~0.9.0",
"backbone.stickit": "~0.8.0"
},
"resolutions": {
"jquery": ">= 1.9.1"
}
}
@@ -1,19 +1,27 @@
<div class="well">
<h4><b>Users</b></h4>
<h4><b>Users</b><span class="pull-right"><button class="btn btn-primary js-editUser">Add User</button></span></h4>
</div>
<table class="table table-bordered table-striped">
<thead>
<th>ID</th>
<th>Email</th>
<th>Name</th>
<th></th>
</thead>
<tbody>
{{#each users}}
<tr>
<td>{{_id}}</td>
<td>{{email}}</td>
<td>{{name}}</td>
<td>
<div class="pull-right">
<button data-id="{{_id}}" class="btn btn-danger btn-sm js-deleteUser">Delete</button>
<button data-id="{{_id}}" class="btn btn-success btn-sm js-editUser">Edit</button>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</table>

@@ -2,16 +2,65 @@ define(function (require) {

'use strict';
var Backbone = require('backbone');
var mediator = require('mediator');
var template = require('hbs!users/list');

var SingleView = require('users/singleView');
require('bootstrap-modal');
require('backbone.bootstrap-modal');

require('datatables');
require('datatables-bootstrap3');

return Backbone.View.extend({
initialize: function(){
this.bindPageEvents();
},
el: '#content',
render: function(){

events: {
'click .js-editUser': 'editUser',
'click .js-deleteUser': 'deleteUser'
},

render: function () {
this.$el.html(template({users: this.collection.toJSON()}));
this.$('table').DataTable();
this.$('table').DataTable({
"aoColumns": [
null,
null,
null,
{ "bSortable": false }
]
});
return this;
},

editUser: function(e) {
var id = $(e.currentTarget).attr('data-id');
var options = id ? {title: 'Edit User', model: this.collection.get(id)} : {title: 'Add User'};
var modalView = new SingleView(options);
this.modal = new Backbone.BootstrapModal({content: modalView}).open();
},

deleteUser: function(e){
var self = this;
var id = $(e.currentTarget).attr('data-id');
var user = this.collection.get(id)
user.destroy().done(function(){
self.collection.remove(user);
self.render();
});
},

bindPageEvents: function(){
mediator.on('users:userSaved', this.userSaved, this);
},

userSaved: function(user){
this.modal.close();
this.collection.add(user);
this.render();
}
});

@@ -0,0 +1,37 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><b>{{title}}</b></h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>

<div class="col-lg-10">
<input type="text" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>

<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-2 control-label">Password</label>

<div class="col-lg-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary js-saveUser">Save changes</button>
</div>
</div>
</div>
@@ -0,0 +1,45 @@
define(function (require) {

'use strict';
var Backbone = require('backbone');
var mediator = require('mediator');
var template = require('hbs!users/single');

require('stickit');

var User = require('users/model');

return Backbone.View.extend({
initialize: function (options) {
this.title = options ? options.title : 'Please Set A Title';
this.model = this.model || new User();
},

bindings: {
'#name': 'name',
'#email': 'email',
'#password': 'password'
},

events: {
'click .js-saveUser': 'saveUser'
},

render: function () {
this.$el.html(template({title: this.title}));
this.stickit();
return this;
},

saveUser: function () {
var self = this;
this.model.save().done(function (response) {
if (self.model.isNew()) {
self.model.set('_id', response._id);
}
mediator.trigger('users:userSaved', self.model);
});
}
});

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

0 comments on commit 8a19651

Please sign in to comment.
You can’t perform that action at this time.