Permalink
Browse files

First complete version of the tutorial. Cleaned-up typos & debug.

  • Loading branch information...
1 parent 357599c commit a4f576f7bf2360791733076de8fe6b666049c34e @antoviaque committed Mar 12, 2012
Showing with 1,460 additions and 67 deletions.
  1. +738 −0 LICENSE
  2. +24 −0 README
  3. +1 −1 static/css/all.css
  4. +2 −13 static/js/forum.js
  5. +318 −29 tutorial/tutorial.html
  6. +377 −24 tutorial/tutorial.txt
View
738 LICENSE

Large diffs are not rendered by default.

Oops, something went wrong.
View
24 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/
+
View
@@ -63,7 +63,7 @@ a {
.main {
padding: 20px;
- background-image: url('../img/green_bkg.png');mok
+ background-image: url('../img/green_bkg.png');
}
.centered {
View
@@ -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,
@@ -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);
@@ -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) {
@@ -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(),
Oops, something went wrong.

0 comments on commit a4f576f

Please sign in to comment.