Question

Is it a good idea to make parent views decorate children view with UI elements, and what is the backbone way to do this?

For example, I have a PhotoView instance which represents a JPEG as well as a few action buttons which appear on hover. This PhotoView is wrapped in a PhotoDetailsView, which adds a Goolge Maps map and a few other things to that.

I want to add an edit action to the photo. The problem is: if I put it on the PhotoView, then the edit function callback should simply fire an event, because it is really the PhotoDetailsView, which has to deal with the edit action. On the other hand, if I make the parent view add this UI button to the child view, it is also not an option, becuase the parent view will have to know the exact UI structure of the child view. In any case, there seems to be a nasty dependency between them, which I want to get rid of.

How do I resolve this dilemma?

Answer 1

If your PhotoView element is a child of your PhotoDetailsView, it seems to me that you should have your edit button as a part of PhotoView, but have the action on your PhotoDetailsView. With a <button class="edit">Edit</button> somewhere in your PhotoView template, this should be in your PhotoDetailsView:

events: {
  "click .edit": "editPhoto"
},
editPhoto: function(event) {
  // Something something
}

This way, all your parent view needs to know about the child view is that it has something clickable of class edit.