CloudEdit: A Backbone.js Tutorial with Rails
jamesyu.org
jamesyu.org
There's a couple things that might be better handled differently:
* Use a collection to keep track of "Documents". You wouldn't have to implement url() yourself, write the manual getJSON() request, or map the response into Document models.
* As previously mentioned, templates would help avoid a lot of the messy string concatenation here.
* You can use the "change" event to listen to changes on documents, instead of re-rendering the Index every time ... That said, with so many people editing the list of docs simultaneously, it probably makes sense to refresh the Index from scratch.
* You shouldn't have to call "delegateEvents()" again inside of Edit#save, as long as the Edit view's "el" hasn't changed.
Great work -- I really appreciate you taking the time to write such a detailed tutorial.
Backbone itself isn’t all that opinionated: it just offers a bunch of legos to put together however you wish, feeling free to ignore many of the pieces. So it’s easy to feel adrift trying to learn how to use it confidently.
Backbone.js really introduces a new kind of data flow for Rails apps. Instead of data flowing like this:
Rails Model => Rails Controller => Rails View
It now flows like this:
Rails Model => Rails Controller => Backbone Model => Backbone Controller => Backbone View
I get confused. 5 components instead of 3—sweet. Why do I want backbone as part of my rails app? Just to ajax-ify everything? Will it reduce the load on my server?
UPDATE: To clarify, in the specific situation the author describes (exactly one model class, no relationships, basically the simplest "schema" one could create), the load will go down slightly. For real, interactive single-page apps (the kind backbone.js is targeting), the load will go up because apps requests data often, way faster than your current app which is limited by page refresh time.
The alternative to “5 components instead of 3” isn’t “just 3”. It’s “3 well-understood components on the server, and a bunch of jQuery/prototype spaghetti on the client that I really wish was better-organized and easier to extend.” If this describes your app, you might do well to look at Backbone.
Underscore.js (which is required (and from the same team) for using Backbone) has a built-in templating with logic feature. In your html make a <script type="text/html"></script> with your template code inside of it, which will be overlooked by the browser during rendering, but you can still select and get the contents of it by slapping on an id. Then it's just a quick call to _.template() with your data object and it renders out beautifully. It feels analogous to your usual MVC structure, and is much easier to debug and update.
That said, he clearly thinks that leaving templates out of it is the simpler solution: "For the purposes of this tutorial, I'll use simple string concatenation in my views." And from the point of view of someone just getting started, he may very well be right.
(I didn't see a license anywhere allowing that.)
ActiveRecord::Base.include_root_in_json = false
James, I'd consider adding a note about this to your tutorial. Also, the link to your GitHub is a fake one; I managed to guess it properly though. Oh, and all of your commits show you as both the committer and the author, I think your git config is wrong. Make sure git config --global author.email is your github email.