× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Non-RESTful backend with backbone.js

<p>Backbone's power is that it has an incredibly flexible and modular structure. It means that any part of Backbone you can use, extend, take out, or modify. This includes the AJAX functionality.</p> <p>Backbone doesn't "care" where do you get the data for your collections or models. It will help you out by providing an out of the box RESTful "ajax" solution, but it won't be mad if you want to use something else!</p> <p>This allows you to find (or write) any plugin you want to handle the server interaction. Just look on <a href="http://backplug.io/" rel="nofollow">backplug.io</a>, Google, and Github.</p> <p>Specifically for Sockets there is <a href="https://github.com/logicalparadox/backbone.iobind" rel="nofollow">backbone.iobind</a>.</p> <p>Can't find a plugin, no worries. I can tell you exactly how to write one (it's 100x easier than it sounds). </p> <p>The first thing that you need to understand is that overwriting behavior is SUPER easy. There are 2 main ways:</p> <p>Globally:</p> <pre><code>Backbone.Collection.prototype.sync = function() { //screw you Backbone!!! You're completely useless I am doing my own thing } </code></pre> <p>Per instance</p> <pre><code>var MySpecialCollection = Backbone.Collection.extend({ sync: function() { //I like what you're doing with the ajax thing... Clever clever ;) // But for a few collections I wanna do it my way. That cool? }); </code></pre> <p>And the only other thing you need to know is what happens when you call "fetch" on a collection. This is the "by the book"/"out of the box behavior" behavior:</p> <ol> <li><a href="https://github.com/jashkenas/backbone/blob/master/backbone.js#L873" rel="nofollow"><code>collection#fetch</code></a> is triggered by user (YOU). <code>fetch</code> will delegate the ACTUAL fetching (ajax, sockets, local storage, or even a function that instantly returns json) to some other function (<a href="https://github.com/jashkenas/backbone/blob/master/backbone.js#L873" rel="nofollow"><code>collection#sync</code></a>). Whatever function is in <code>collection.sync</code> has to has to take 3 arguments: <ol> <li><strong>action</strong>: <code>create</code> (for creating), action: <code>read</code> (for fetching), <code>delete</code> (for deleting), or <code>update</code> (for updating) = CRUD. </li> <li><strong>context</strong> (this variable) - if you don't know what this does it, don't worry about it, not important for now</li> <li><strong>options</strong> - where da magic is. We only care about 1 option though <ul> <li>success: a callback that gets called when the data is "ready". THIS is the callback that <code>collection#fetch</code> is interested in because that's when it takes over and does it's thing. The only requirements is that <code>sync</code> passes it the following 1st argument</li> <li><code>response</code>: the actual data it got back </li> </ul></li> <li>Now has to return a success callback in it's options that gets executed when it's done getting the data. That function what it's responsible for is </li> </ol></li> <li>Whenever <code>collection#sync</code> is done doing it's thing, <code>collection#fetch</code> takes back over (with that callback in passed in to success) and does the following nifty steps: <ol> <li>Calls <code>set</code> or <code>reset</code> (for these purposes they're roughly the same).</li> <li>When <code>set</code> finishes, it triggers a <code>sync</code> event on the collection broadcasting to the world "yo I'm ready!!"</li> </ol></li> <li>So what happens in <code>set</code>. Well bunch of stuff (deduping, parsing, sorting, parsing, removing, creating models, propagating changesand general maintenance). Don't worry about it. It works ;) What you need to worry about is how you can hook in to different parts of this process. The only two you should worry about (if your wraps data in weird ways) are <ol> <li><a href="https://github.com/jashkenas/backbone/blob/master/backbone.js#L907" rel="nofollow"><code>collection#parse</code></a> for parsing a collection. Should accept raw JSON (or whatever format) that comes from the server/ajax/websocket/function/worker/whoknowwhat and turn it into an ARRAY of objects. Takes in for 1st argument <code>resp</code> (the JSON) and should spit out a mutated response for return. Easy peasy.</li> <li><a href="https://github.com/jashkenas/backbone/blob/master/backbone.js#L561" rel="nofollow"><code>model#parse</code></a>. Same as collection but it takes in the raw objects (i.e. imagine you iterate over the output of <code>collection#parse</code>) and splits out an "unwrapped" object. </li> </ol></li> <li>Get off your computer and go to the beach because you finished your work in 1/100th the time you thought it would take. </li> </ol> <p>That's all you need to know in order to implement whatever server system you want in place of the vanilla "ajax requests". </p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/24770250/Non-RESTful%20backend%20with%20backbone.js/24770860">Stack Overflow</a>.</p>
comments powered by Disqus