Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added more Backbone code

  • Loading branch information...
commit 7d5cc3d4631efee86719e35522f514dbc302c193 1 parent 8e86240
Alex Young authored
Showing with 97 additions and 116 deletions.
  1. +10 −8 app.js
  2. +84 −106 public/javascripts/application.js
  3. +3 −2 views/layout.jade
View
18 app.js
@@ -188,7 +188,7 @@ app.get('/documents', loadUser, function(req, res) {
[], { sort: ['title', 'descending'] },
function(err, documents) {
documents = documents.map(function(d) {
- return { title: d.title, _id: d._id };
+ return { title: d.title, id: d._id };
});
res.render('documents/index.jade', {
locals: { documents: documents, currentUser: req.currentUser }
@@ -218,7 +218,7 @@ app.get('/documents/titles.json', loadUser, function(req, res) {
[], { sort: ['title', 'descending'] },
function(err, documents) {
res.send(documents.map(function(d) {
- return { title: d.title, _id: d._id };
+ return { title: d.title, id: d._id };
}));
});
});
@@ -240,12 +240,15 @@ app.get('/documents/new', loadUser, function(req, res) {
// Create document
app.post('/documents.:format?', loadUser, function(req, res) {
- var d = new Document(req.body.d);
+ var d = new Document(req.body);
d.user_id = req.currentUser.id;
d.save(function() {
switch (req.params.format) {
case 'json':
- res.send(d.toObject());
+ var data = d.toObject();
+ // TODO: Backbone requires 'id', but can I alias it?
+ data.id = data._id;
+ res.send(data);
break;
default:
@@ -281,9 +284,8 @@ app.get('/documents/:id.:format?', loadUser, function(req, res, next) {
app.put('/documents/:id.:format?', loadUser, function(req, res, next) {
Document.findOne({ _id: req.params.id, user_id: req.currentUser.id }, function(err, d) {
if (!d) return next(new NotFound('Document not found'));
-
- d.title = req.body.d.title;
- d.data = req.body.d.data;
+ d.title = req.body.title;
+ d.data = req.body.data;
d.save(function(err) {
switch (req.params.format) {
@@ -399,7 +401,7 @@ app.post('/search.:format?', loadUser, function(req, res) {
switch (req.params.format) {
case 'json':
res.send(documents.map(function(d) {
- return { title: d.title, _id: d._id };
+ return { title: d.title, id: d._id };
}));
break;
}
View
190 public/javascripts/application.js
@@ -1,15 +1,15 @@
(function() {
- var Document, Documents, DocumentRow, DocumentList, DocumentView;
+ var Document, Documents, DocumentRow, DocumentList, DocumentControls, ListToolBar, AppView;
_.templateSettings = {
- interpolate : /\{\{(.+?)\}\}/g
+ interpolate: /\{\{(.+?)\}\}/g
};
Document = Backbone.Model.extend({
Collection: Documents,
url: function() {
- return '/documents/' + this.get('_id') + '.json';
+ return this.get('id') ? '/documents/' + this.get('id') + '.json' : '/documents.json';
},
display: function() {
@@ -29,14 +29,6 @@
return d.get('title');
};
- DocumentView = Backbone.View.extend({
- events: {
- },
-
- initialize: function() {
- },
- });
-
DocumentRow = Backbone.View.extend({
tagName: 'li',
@@ -54,6 +46,12 @@
$('#document-list .selected').removeClass('selected');
$(this.el).addClass('selected');
this.model.display();
+ this.controls = new DocumentControls(this.model),
+ this.toolbar = new ListToolBar(this.model);
+ },
+
+ remove: function() {
+ $(this.el).remove();
},
render: function() {
@@ -70,63 +68,95 @@
Collection: Documents,
initialize: function() {
- _.bindAll(this, 'render');
+ _.bindAll(this, 'render', 'addDocument');
this.Collection.bind('refresh', this.render);
},
+ addDocument: function(d) {
+ d.rowView = new DocumentRow({ model: d });
+ this.el.append(d.rowView.render().el);
+ },
+
render: function(documents) {
- var element = this.el;
+ var documentList = this;
documents.each(function(d) {
- d.rowView = new DocumentRow({ model: d });
- element.append(d.rowView.render().el);
+ documentList.addDocument(d);
});
+
+ // Open the first document by default
+ documents.first().rowView.open();
}
});
- new DocumentList();
- window.Documents = Documents;
+ DocumentControls = Backbone.View.extend({
+ el: $('#controls'),
+
+ events: {
+ 'click #save-button': 'save'
+ },
- //Documents.fetch();
+ initialize: function(model) {
+ _.bindAll(this, 'save', 'showHTML');
+ this.model = model;
+ },
- // Easily get an item's database ID based on an id attribute
- /*
- $.fn.itemID = function() {
- try {
- var items = $(this).attr('id').split('-');
- return items[items.length - 1];
- } catch (exception) {
- return null;
+ save: function(e) {
+ this.model.set({
+ title: $('input.title').val(),
+ data: $('#editor').val()
+ });
+
+ this.model.save();
+ this.model.rowView.render();
+ e.preventDefault();
+ },
+
+ showHTML: function(e) {
+ e.preventDefault();
+ // TODO
}
- };
+ });
- $.put = function(url, data, success) {
- data._method = 'PUT';
- $.post(url, data, success, 'json');
- };
+ ListToolBar = Backbone.View.extend({
+ el: $('#left .toolbar'),
- $('#delete-document').click(function(e) {
- e.preventDefault();
- if (confirm('Are you sure you want to delete that document?')) {
- var element = $(this),
- form = $('<form></form>');
- form
- .attr({
- method: 'POST',
- action: '/documents/' + $('#document-list .selected').itemID()
- })
- .hide()
- .append('<input type="hidden" />')
- .find('input')
- .attr({
- 'name': '_method',
- 'value': 'delete'
- })
- .end()
- .appendTo('body')
- .submit();
+ events: {
+ 'click #create-document': 'add',
+ 'click #delete-document': 'remove'
+ },
+
+ initialize: function(model) {
+ _.bindAll(this, 'add', 'remove');
+ this.model = model;
+ },
+
+ add: function(e) {
+ e.preventDefault();
+ var d = new Document({ title: 'Untitled Document', data: '' });
+ d.save();
+ Documents.add(d);
+ appView.documentList.addDocument(d);
+ d.rowView.open();
+ },
+
+ remove: function(e) {
+ e.preventDefault();
+ if (confirm('Are you sure you want to delete that document?')) {
+ this.model.rowView.remove();
+ this.model.destroy();
+ }
}
});
+ AppView = Backbone.View.extend({
+ initialize: function() {
+ this.documentList = new DocumentList();
+ }
+ });
+
+ var appView = new AppView();
+ window.Documents = Documents;
+
$('#logout').click(function(e) {
e.preventDefault();
if (confirm('Are you sure you want to log out?')) {
@@ -150,8 +180,6 @@
}
});
- */
-
// Correct widths and heights based on window size
function resize() {
var height = $(window).height() - $('#header').height() - 1,
@@ -184,59 +212,6 @@
});
}
- /*
- $('#document-list li a').live('click', function(e) {
- var li = $(this);
-
- $.get(this.href + '.json', function(data) {
- $('#document-list .selected').removeClass('selected');
- li.addClass('selected');
- $('#editor').val(data.data);
- $('.title').val(data.title);
- $('#editor').focus();
- });
-
- e.preventDefault();
- });
-
- if ($('#document-list .selected').length == 0) {
- $('#document-list li a').first().click();
- }
-
- $('#save-button').click(function() {
- var id = $('#document-list .selected').itemID(),
- params = { d: { data: $('#editor').val(), id: id, title: $('input.title').val() } };
- $.put('/documents/' + id + '.json', params, function(data) {
- // Saved, will return JSON
- $('#document-title-' + id).html(data.title);
- });
- });
-
- $('#create-document').click(function(e) {
- $.post('/documents.json', { d: { data: '', title: 'Untitled Document' } }, function(new_doc) {
- showDocuments([new_doc]);
- $('#document-title-' + new_doc._id).click();
- });
- e.preventDefault();
- });
-
- $('#html-button').click(function() {
- var container = $('#html-container');
- if (container.is(':visible')) {
- container.html('').hide();
- $('#html-button').removeClass('active');
- } else {
- $('#save-button').click();
- $('#html-button').addClass('active');
- var id = $('#document-list .selected').itemID();
- $.get('/documents/' + id + '.html', function(data) {
- // Saved, will return JSON
- container.html(data).show();
- });
- }
- });
- */
-
function hideFlashMessages() {
$(this).fadeOut();
}
@@ -246,7 +221,9 @@
}, 5000);
$('.flash').click(hideFlashMessages);
+ // TODO: Convert to Backbone
// Search bar
+ /*
function showDocuments(results) {
for (var i = 0; i < results.length; i++) {
$('#document-list').append('<li><a id="document-title-' + results[i]._id + '" href="/documents/' + results[i]._id + '">' + results[i].title + '</a></li>');
@@ -292,6 +269,7 @@
});
e.preventDefault();
});
+ */
$(window).resize(resize);
$(window).focus(resize);
View
5 views/layout.jade
@@ -25,6 +25,7 @@ html
!{flashMessages}
!= body
script(type='text/javascript', src='/javascripts/application.js')
- script(type='text/javascript')
- Documents.refresh(!{JSON.stringify(documents)});
+ - if (typeof documents !== 'undefined')
+ script(type='text/javascript')
+ Documents.refresh(!{JSON.stringify(documents)});
Please sign in to comment.
Something went wrong with that request. Please try again.