Add class to elements for values of attribute with Backbone.ModelBinder

Question

I'm using Backbone.ModelBinder in a Backbone.js Marionette project. I've a scenario which I can't work out how to use ModelBinder to automatically update my model/UI.

My model has a 'status' string attribute, with multiple states. In this example I'll show the code for two: 'soon', 'someday'

In my UI I have a list on which I use click events to set the model status, and update classes to highlight the relevant link in the UI.

<dd id="status-soon"><a>Soon</a></dd>
<dd id="status-someday" class="active"><a>Someday</a></dd>

events: {
    'click #status-soon': 'setStatusSoon',
    'click #status-someday': 'setStatusSomeday'
},
setStatusSoon: function () {
    this.model.set('status', 'soon');
    this.$el.find('.status dd').removeClass('active');
    this.$el.find('#status-soon').addClass('active');
},
... etc

It feels like I doing this a long-winded and clunky way! The code bloat increases with the number of states I need to support. What's the best way of achieving the same outcome with ModelBinder?

Answer 1

You could probably simplify things with a data attribute, something like this:

<dd data-status="soon" class="set-status"><a>Soon</a></dd>
<dd data-status="someday" class="set-status active"><a>Someday</a></dd>

and then:

events: {
    'click .set-status': 'setStatus'
},
setStatus: function(ev) {
    var $target = $(ev.target);
    var status  = $target.data('status');
    this.model.set('status', status);
    this.$el.find('.status dd.set-status').removeClass('active');
    $target.addClass('active');
}

You might not need the set-status class, just keying things on the <dd>s might be sufficient; I prefer separating my event handling from the nitty gritty element details though.