A Simple Example For Backbone.ModelBinding

I received a question via Github, asking if I had any simple, functional examples of my Backbone.ModelBinding plugin. After looking back through my blog posts and the documentation for it, I realized I did not. So, I whipped one up real quick. Here’s the JSFiddle for it:

(and for those of you using an RSS reader, the above iframe points to http://jsfiddle.net/derickbailey/Cpn3g/4/ )

The functionality of this example is very simple, but is shows just how little code you need to make your forms and html elements work together, through the use of backbone’s models and my plugin.

When the app is started, it populates a ‘person’ with the name ‘joe bob’. The form is bound to the model, so it is updated with the correct text in the input boxes. This demonstrates the form input convention binding.

The display area is also bound to the model so it displays the name. When you make changes to either the first name or last name in the form and then tab out of the text box (or otherwise cause the text box to lose focus / fire it’s “change” event), the display area will be updated with the information you entered. This demonstrates the data-bind attribute binding.

Be sure to checkout the full source in the Javascript and HTML tabs of the fiddle. I think you’ll be pleasantly surprised at how easy this is.