Question

I am stuck on the following issue:

I have a model with a property that defines if it is visibly selected or not, which I will call SelectModel for the purpose of this question.

SelectModel = Backbone.Model.extend({
defaults:{
 isSelected: false
}
})

Now the first part that I do not really get is how I should handle the selection in general.
If I want to use the observer pattern, my View should listen to the change of the isSelected property. But my view also triggers this in the first place, so I would have.

SelectView = Backbone.View.extend({
initialize: function(){
this.model.bind("change:isSelected", this.toggleSelectionVisually)
},

events: {
"click" : toggleSelection
},

toggleSelection: function(){
this.model.set({"isSelected": !this.model.get("isSelected");
},

toggleSelectionVisually:(){
//some code that shows that the view is now selected
},
})

So this in itself already feels a bit absurd but I guess I just understand something wrong.

But the part which I really fail to implement without making my code horrible is handling the selection for multiple models that only one model is selected at a time.

SelectListView = Backbone.View.extend({
initialize: function(){
this.collection = new SelectList();
},

toggleSelection: function(){
????
}   
})

So who should notify whom of the selection change? Which part should trigger it and which part should listen? I am really stuck on this one. For a single View it is doable, for a collection I am sadly lost.

Answer 1

I would have suggested the following simplification for your SelectView until I saw the second part of your question:

SelectView = Backbone.View.extend({
  events: {
    "click" : toggleSelection
  },

  toggleSelection: function(){
    this.model.set({"isSelected": !this.model.get("isSelected");
    //some code that shows whether the view is selected or not
  }
});

However, since the isSelected attribute is apparently mutually exclusive, can be toggled off implicitly when another one is toggled on, I think the way you have it is best for your case.

So, using your existing SelectView and, you could have a SelectListView as follows. WARNING: it iterates over your entire collection of models each time one is selected. If you will have a large number of models this will not scale well, and you’ll want to cache the previously-selected model rather than iterating over the entire collection.

SelectListView = Backbone.View.extend({
  initialize: function(){
    this.collection = new SelectList();
    this.collection.bind('change:isSelected', this.toggleSelection, this);
  },

  toggleSelection: function(toggledModel){
    //A model was toggled (on or off)
    if(toggledModel.get('isSelected') {
      //A model was toggled ON, so check if a different model is already selected
      var otherSelectedModel = this.collection.find(function(model) {
        return toggledModel !== model && model.get('isSelected');
      });

      if(otherSelectedModel != null) {
        //Another model was selected, so toggle it to off
        otherSelectedModel.set({'isSelected': false});
      }
    }
  }   
});