Enabling And Disabling A Button With Backbone.ModelBinding

This is a follow-up post to my previous post on how to enable and disable a button with backbone. I showed a working solution in that version, but there are a few things about it that I don’t like. After some discussion about this same scenario on the backbone mailing group, I decided I wanted to tackle it a different way – using my Backbone.ModelBinding plugin.

How It Works

The Backbone.ModelBinding plugin allows you to bind a model’s properties to various attributes of an html element through the use of a data-bind attribute in your html element (see the readme for more detail). One of the things you can do with this is set the element to be disabled based on the value of a model’s property:

<button data-bind="disable invalid">Save</button>

This works well. It allows you to enable and disable the save button based on the model’s `invalid` property. When the model is invalid, it disables the button and when it’s valid, it enables the button.

The negative semantics for button enabling and disabling are important. There are times when you will want to enable a button if the model is invalid, for example. In general, though, I don’t like using the negative form of valid to enable and disable a save button. It gets confusing to talk about `invalid` in the code, in my opinion. So I added the ability to specify `enabled` in a data-bind attribute, which lets me use an `isValid` property on my model:

<button data-bind="enabled isValid">Save</button>

Again, when my model is valid, the save button is enabled and when the model is not valid, the save button is disabled. The difference is the semantics of the model’s property and the way the data-bind attribute reads. For my money, the positive semantics for enabling and disabling a save button are easier to read and understand.

A Demonstration

Check out this JSFiddle for a working demonstration of both the `enabled` and `disabled` data-bind attributes. Be sure to look at the javascript and html source, to wrap your head around both of these examples.

 


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

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, Semantics. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Steve Strong

    Just started using Backbone.ModelBinding, and I’m finding it very useful – thanks!  Quick question concerning the data-binding attributes for things like “displayed” – currently, these bind to the model which makes things easy since backbone is generating suitable change requests.  For some scenarios (such as your isValid example), this is just fine. 

    However, I’ve got screens where the decisioning as to whether some things should be displayed or not seems to be more of a view concern rather than a model concern, and adding properties to the model seems incorrect.  What do you think to a) the idea and b) the practicalities of being able to hook these types of data-bind attributes to view-generated events rather than the model directly?

    Cheers,

    Steve

    • http://mutedsolutions.com Derick Bailey

      there are definitely times when it should be the view’s responsibility to update things and change how it looks. i’m not sure i see a need to decouple the view object from the manipulation of the html, but maybe i’m not thinking about the code the same way you are. can you provide an example of what you mean?

      … also – would you mind posting this as an issue on github? it will be easier to deal with code examples, lengthy discussion (if needed), etc. over there: http://github.com/derickbailey/backbone.modelbinding/issues

      thanks!