所有收集项目的Backbonejs事件或每个ItemView的事件

Question

What approach would be more efficient?

I have a Backbone.Collection so i Create a Backbone.View to render this collection. The CollectionView render method:

render: ->
    container = document.createDocumentFragment()
    @collection.each (item) ->
        view = new ItemView(item)
        container.appendChild view.el
        view.render()
    $(el).append container

I can use the events in two forms.

1.- Set the events object in CollectionView, so i need to declare the action of select an item in the CollectionView and "rescue" the model that i selected.

CollectionView extends Backbone.View
    events:
        'click #itemView', 'onSelectItem'
    onSelectItem: ->
        ##Get the model
        ##Show ItemDetailView

2.- Set the events object per itemView, so the select method don't need to retrieve the model.

ItemView extends Backbone.View
    events:
        'click #div','onSelect'
    onSelect: ->
        #Show ItemDetailView

Which of this options are better?

EDITED: I create a JSperf snippet http://jsperf.com/backbone-events-on-collectionview-or-per-itemview

JSperf show us that the ItemView approach is more faster, but is this the only metric of importance?

Answer 1

If I understand you correctly, option 2 seems the most sane. You will be referring to this.model as opposed to digging through the collection to find the model associated with the clicked view.

Answer 2

The second approach is much better. Performance aside, the code is much more straightforward. In 6 months, if you had to return to this code, would you think the event would be handled in the ItemView, or the CollectionView? It is a click event on the ItemView, so that's where I would go to look for how it is handled.

Is there a good reason to handle the event in the collection? If you needed the handle the event from the CollectionView, you could delegate the event to the collection. A little redirection, but, to me, this is far clearer. For example:

# The collection view

initialize: ->
  @listenTo @, 'selected', @itemSelected

render: ->
  container = document.createDocumentFragment()
  @collection.each (item) ->
    view = new ItemView(item, parent: @)
    container.appendChild view.el
    view.render()
  $(el).append container

itemSelected: (model)->
  # Do whatever you need to here, like 
  # show the ItemDetailView in the container

# The ItemView

ItemView extends Backbone.View
  events:
    'click #div','onSelect'
  onSelect: ->
    @options.parent.trigger('selected', @model, @)
    #Show ItemDetailView