Skip to content

Commit

Permalink
First complete version of the tutorial. Cleaned-up typos & debug.
Browse files Browse the repository at this point in the history
  • Loading branch information
antoviaque committed Mar 12, 2012
1 parent 357599c commit a4f576f
Show file tree
Hide file tree
Showing 6 changed files with 1,460 additions and 67 deletions.
738 changes: 738 additions & 0 deletions LICENSE

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions README
@@ -0,0 +1,24 @@
Backbone-relational Tutorial - Nested Models With Backbone.js
=============================================================

Introduction
------------

### Backbone.js

Backbone.js allows to implement the whole MVC pattern on the client, leaving the server to do what he knows best: exposing a set of well-defined REST interfaces, which the client queries when he needs to fetch or update some information. No need to split the HTML rendering between the server templates and the client-side javascript.

It's not only cleaner, it's also an excellent architecture to make responsive applications. Less information needs to be exchanged with the server - the formatting (views and controllers) being on the client, you only need to exchange the data being manipulated on the REST interfaces.

No full page reload - the server sends a static HTML file upon the first request, then the JS client handles the interaction with the user, only remodeling the portions of the DOM that changes between pages. And, better still, Backbone.js takes care of a large part of the work required to synchronize data with the server. Sweet!

### Backbone-relational

However, when I recently started to learn about Backbone, I realized it doesn't help to handle relationships between models. Most non-trivial applications need this - forum threads each have a series of comments, billing invoices have several items to charge for...

If you're reading this, you've probably found out about backbone-relational after reading a few threads. But the documentation is sparse, and it's hard to see how to use it practically. How do you structure your views to represent the relations between models? How do you update or push relational models to their corresponding REST APIs?

[Read the full tutorial...][Tutorial]

[Tutorial]: http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/

2 changes: 1 addition & 1 deletion static/css/all.css
Expand Up @@ -63,7 +63,7 @@ a {

.main {
padding: 20px;
background-image: url('../img/green_bkg.png');mok
background-image: url('../img/green_bkg.png');
}

.centered {
Expand Down
15 changes: 2 additions & 13 deletions static/js/forum.js
Expand Up @@ -87,16 +87,12 @@
},

on_thread_created: function(thread, response) {
console.log('bla1');
this.model.add(thread, {at: 0});
console.log('bla2');
var message = new $.forum.Message({ author: this.$('.new_message_author').val(),
text: this.$('.new_message_text').val(),
thread: thread.get('_id') });
console.log('bla3');
message.save({}, {
success: function() {
console.log('bla4');
$.forum.app.navigate('thread/'+thread.get('_id')+'/', { trigger: true });
},
error: this.on_error,
Expand Down Expand Up @@ -142,7 +138,7 @@
className: 'thread_view',

initialize: function(){
_.bindAll(this, 'render', 'render_message', 'on_keypress', 'on_submit');
_.bindAll(this, 'render', 'render_message', 'on_submit');
this.model.bind('change', this.render);
this.model.bind('reset', this.render);
this.model.bind('add:messages', this.render_message);
Expand All @@ -151,8 +147,7 @@
template: Handlebars.compile($('#tpl_thread').html()),

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

render_message: function(message) {
Expand All @@ -164,12 +159,6 @@
'click input[type=submit]': 'on_submit',
},

on_keypress: function(e) {
if(e.keyCode === 13) {
this.on_submit(e);
}
},

on_submit: function(e) {
var new_message = new $.forum.Message({author: this.$('.new_message_author').val(),
text: this.$('.new_message_text').val(),
Expand Down

0 comments on commit a4f576f

Please sign in to comment.