JavaScript
Article

jQuery & Backbone Forms Code/Demos

By Sam Deering

Pretty big Reference List of jQuery & Backbone Forms Code/Demos.

Useful for developers trying to learn Backbone.js with forms.

 

Form Data Parsing (Get and Set values)

http://blog.rjzaworski.com/2012/01/parsing-forms-with-backbone-js/ demo : https://jsfiddle.net/rjzaworski/wSh74/

Form Checkboxes & Lists:

http://tutorialzine.com/2013/04/services-chooser-backbone-js/ demo : http://demo.tutorialzine.com/2013/04/services-chooser-backbone-js/index.html

todo list demo: http://backbonejs.org/examples/todos/ todos code overview: http://backbonejs.org/docs/todos.html

Basic Backbone List code overview and demos: http://arturadib.com/hello-backbonejs/

Form Selects / Dropdowns:

https://jsfiddle.net/evilcelery/c5QHr/

Form Generation:

backbone-forms.js https://github.com/powmedia/backbone-forms backbone-forms.js annotated code overview http://mkla.bz/bbf/docs/bbf.html

Registration Template https://jsfiddle.net/evilcelery/VkUFu/

Registration Template (Bootstrap) https://jsfiddle.net/evilcelery/4XZMb/

Form Validation:

backbone-validation.js http://thedersen.com/projects/backbone-validation/ demo: http://thedersen.com/projects/backbone-validation/examples/

Render Validation Messages for Twitter Bootstrap: https://gist.github.com/driehle/2909552
Validate All Plugin :https://github.com/gfranko/Backbone.validateAll

Form Model Data Binding:

backbone.modelbinder.js https://github.com/theironcook/Backbone.ModelBinder demos: https://github.com/theironcook/Backbone.ModelBinder/wiki/Interactive-JSFiddle-Examples

Basic Example: First and Last Name Binding: https://jsfiddle.net/derickbailey/Cpn3g/4/

Backbone, Require and Grunt example: https://github.com/codef0rmer/addressbookMVC/tree/master/backbone.js_require.js article: http://amitgharat.wordpress.com/2012/06/23/writing-your-first-application-using-backbone-js/

rivet.js http://rivetsjs.com/ basic demo: https://jsfiddle.net/eH4zG/183/ demo todolist: http://bl.ocks.org/mikeric/raw/3345763/ (code https://gist.github.com/mikeric/3345763)
rivet.js annotated source code: http://rivetsjs.com/docs/rivets.html

epoxy.js http://epoxyjs.org/ code demo todos: http://epoxyjs.org/tutorials.html#epoxy-todos

Two-way binding (if you need it):

backbone.stickit.js http://nytimes.github.io/backbone.stickit/

Backbone boilerplates

Minimal Web App with backbone, handlebars & require https://github.com/tbranyen/boilerplate-handlebars-layoutmanager

Full build process with modules & packages https://github.com/backbone-boilerplate/backbone-boilerplate/wiki/Getting-started-overview

Backbone Sample Apps & Demos

Gumby2 Backbone Bootstrap http://jquery4u.com/demos/gumby2-backbone-bootstrap/

Employee Directory https://github.com/ccoenraets/backbone-directory

Backbone LayoutManager Example https://github.com/MikeLarned/backbonelayoutsexample

Layoutmanager wiki https://github.com/tbranyen/backbone.layoutmanager/wiki/_pages

Backbone and Requirejs

Relative paths https://github.com/backbone-boilerplate/backbone-boilerplate/wiki/Relative-path-setup-notes

Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.