Question

I have a view that creates a sub-view per item in the list. Generically let’s call them ListView and ListItemView. I have attached an event as follows on ListItemView:

events: {
    "click .remove": "removeItem"
}

I have template-generated html for ListItemView that is approximately like the following (swapped lb/rb for {/} so you can see the “illegal” html):

{div class="entry" data-id="this_list_item_id"}

    SOME STUFF HERE

    {div class="meta"}

        {a class="remove" href="javascript:;"}[x]{/a}

    {/div}

{/div}

The problem is, when the click on any of the [x]’s, ALL of the ListItemViews trigger their removeItem function. If I have it go off of this model’s id, then I drop all the items on the page. If I have it go off the clicked item’s parent’s parent element to grab the data-id, I get a delete for EACH ListItemView instance. Is there a way to create an instance-specific event that would only trigger a single removeItem?

If I have ListView hold a single instance of ListItemView and reassign the ListItem model and render for each item in the list it works. I only end up with one action (removeItem) being triggered. The problem is, I have to find the click target’s parent’s parent to find the data-id attr. Personally, I think the below snippet is rather ugly and want a better way.

var that = $($(el.target).parent()).parent();

Any help anyone gives will be greatly appreciated.

Answer 1

It seems like your events hash is on your ListView.

If it is, then you can move the events hash to ListItemView and your removeItem function can be the following

removeItem: function() {
  this.model.collection.remove(this.model);
}

If this isn’t the case, can you provide your ListView and ListItemView code so I can look at it.