![]() Specifying the error and success settings in the options to `this.ajax` allows those callbacks to run first, before the applicable event is fired.Īs a full example, inside of a model you can call `this.ajax` with an action name, callbacks, and other options.Generic-named events are fired on a global event mediator as well: ‘ajaxStart’, ‘aja圎rror’, and ‘ajaxSuccess’. calling `this.ajax(‘foo’)` triggers the `fooStart`, `fooError`, and `fooSuccess` events, as appropriate. When using the `ajax` method brought in with this mixin, some default events are fired, based on the action name passed as the first argument.For example, this is used in one model to specify that all ajax requests should use the ‘POST’ method. Objects may also specify an `ajaxOptions` property, which provides default options to pass to `jQuery.ajax`.Objects including this mixin can specify a `urls` property, which the `urlFor` function will use to translate an action name to a URL, using Rails-style /:bound/path/:segments.This mixin provides several functions and configuration hooks for working with ajax requests: So I decided instead to abandon Backbone.sync completely, and write an `ajax` method to provide a simple wrapper around `jQuery.ajax`.īecause I needed similar functionality in both models and collections, I wrote a mixin that both could use. Replacing Backbone.sync for working around an existing non-RESTful APIīecause of an existing non-RESTful API, it was difficult to wire up my comment model and collection to use Backbone.sync for fetching and saving models. This makes views more DRY by extracting boilerplate template setup code. In the main initialization code, I call a compileTemplates() function that loops through every view in a namespace, translating the templateId property of each into a template function. Killing boilerplate view code with compileTemplates() In addition to the above three patterns afforded by Backbone.js, I came up with several new patterns to help keep my code organized and DRY. Slightly up from 1800 lines from before, but much more manageable with the largest file being 400 lines (the comment model). I ended up with 25 files (3 collections, 3 models, 17 views, 1 mixin, and 1 main), and 2000 lines of code. Then I gradually built view upon view, adding model and collection functionality as required, until I had feature parity with the old system. I was able to write unit tests to verify this was happening correctly. I began with just a model and a collection, wiring them up to load data from the server, and inspect it in the browser console. With these patterns in mind, I started writing code. Removing direct references between unrelated sections of code allows reasoning about smaller units of functionality at one time. ![]() The Backbone.Events mixin, used to create an event-driven architecture, helps to decouple sections of code with separate concerns. ![]() Instead of scattering these selectors inside functions and nested callbacks, having a single point of reference makes it easy to refactor markup and styles safely. Declarative Eventsĭeclarative events isolate the selectors used by js for binding events. Collections, Models, and Viewsĭistinct collection, model and view objects separate data manipulation (in the collection + model) from DOM manipulation (in the view), which used to be all mixed up in the same place. Javascript used certain selectors to find elements to store data and listen to events, sometimes the same selectors used for styling! Backbone.js includes several patterns that helped me decouple all this. Second, I had identified a big shortcoming of the existing system: tight coupling between Javascript, HTML, and CSS. ![]() I decided to rewrite the JavaScript layer of Chorus’s commenting system from scratch, using Backbone.js.įor starters, I had a great experience with using it to power Syllabus ( Chorus’ liveblogging tool), and knew that the basic requirements for Syllabus were the same as for comments: a live updating list of short posts. When finally the root cause had been identified, and the one-line fix applied, I flipped tables. I spent hours tracing through a 2000-line javascript file, trying to reproduce the problem. ![]() Once upon a time, I spent a week investigating why comments were failing to update live on SB Nation articles. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |