But, wouldn’t it be nice if we could make it easier to use, maintain, and customize?
After all, who wants to have to go in to a block of HTML and add a bunch of markup just because you need another field from your domain to show up? Not you? Not me, either.
In this article, you will
Refactor the Barebones Story Editor to become fortified with the popular Backbone.js open source library
Learn how to extend Backbone.Model and override its functions to work with existing HTTP APIs — such as VersionOne’s, naturallly
Learn the Backbone Forms library for creating HTML forms automagically from simple JS-based schemas
Use some handy features of Underscore.js, Backbone’s counterpart library for functional utilities
What you’ll need
Like before, I’ve tested these in Google Chrome, but not other browsers yet. Please let me know if you find issues in other browsers.
I don’t have experience with all of these, but the VersionOne Development Team has been using several of these, notably Backbone.js. So, in this article, we’re going to leverage Backbone.js, its sidekick Underscore.js, and a library named Backbone Forms that extends Backbone with form-creation and validation magical powers.
Learn you a JS library for great good
Don’t do this now, unless you like juggling a thousand tabs in your browser, but if you are new to these libraries and want to go further in depth, I encourage you to check out these links:
Click Fork at the top, which will create a new copy for you to use
Type or paste the following HTML into the HTML panel of the fiddle:
Notice that instead of specifying all our form elements manually, we simply have a placeholder:
This replaces the much more verbose HTML from before:
I have refrained from adding comments to the code for ease of reading, but you can visit the Gist, or the live JSFiddle to see an exhaustively commented version. Hey, even type the comments in yourself if you learn better that way. Knock yourself out! In the next article, we’ll study more about Backbone Forms and Backbone.Model to understand them better.
We’ll dig deeper into the technical explanation of Backbone Forms and Backbone.Model in the next article, but from a high level, here’s what we’re starting to accomplish with our code:
Full embrace of REST’s generic interface — via Backbone.Model and Backbone.ync, with its clear mapping to the GET, PUT, POST, DELETE, and PATCH standard HTTP methods. With the exception of the small amount of overridden code we added to our derivation of Backbone.Model, we have effectively eliminated the need for a “custom data access component” to communicate with the VersionOne REST Data API, or indeed any REST API.