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.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Backbone, Backbone.ModelBinding, Javascript, JQuery. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • The only problem I see is that the server model attributes change and you need to update the dat-bind attributes.  Synching with the JSON would be nice

    • i’m not quite following you.. can you explain that scenario a little more? what is being updated, when, and when is the data being transferred to / from the server?

  • I mean if in this example I removed or renamed the first_name attribute to firstname from the server side (ruby, C# etc.) class then I need to update my client side mark up to update the data-binding attribute to data-binding=”firstname” or am I missing something?

    • yes, your right… but why would you do that? this would cause all kinds of problems not related to my plugin. the json that comes back from the server should be what the client side uses. if your model’s properties are ‘firstname’ and ‘lastname’ on the server, then they should be this in the javascript / backbone code as well.

      • First name is a bad example, but model code changes, attributes get added, modified and removed all the time.  

        • true. when this happens, would you let your ERB/HAML/ASP.NET MVC views lay stale, still trying to find “first_name” when the model is now called “firstname” ? not likely… the backbone code should get the same 1st class treatment as the standard views, and should be updated accordingly.

          • You’re right in that respect.

            One of the reasons I chose backbone instead of knockout was because of the fetch capability of the model and synching with the server.   I could be wrong but there seems less room for synchronisation issues this way.

          • i must be misunderstanding what you’re getting after… i still don’t see how there is any possibility of sync issues, with the fetch. 

            are you talking about a scenario where you’ve deployed new code to the server, while a user is currently on a page that uses a backbone setup?

          • No, I just mean server side code and client side code being kept in sync.