Ember CollectionView - Removing an ItemView

Question

I'm having a hard time finding an answer to this, so perhaps I'm doing it all wrong. I have a collection view with an item view class. Each item has a delete button, which refers to the action "removeItem." This does remove the item, but I need to refer back to the collection view content in order to post the updated array with an API call.

App.WatchlistTilesView.Collection = Ember.CollectionView.extend({
  tagName: "ul",
  itemViewClass: Ember.View.extend({
    attributeBindings: "role",
    role: "tile",
    classNames: ["tile"],

    removeItem: function() {
      this.remove();
    },

    templateStock: Ember.Handlebars.compile("
      <button {{action removeItem}}>Delete</button> 
      ...
    "),
  })
});

EDIT:

I found the answer to this particular problem. There was a property on the collection view that needed to be accessed by the item class. I was able to access it with this.get("parentView"). Also, I had to add the view as the target for the removeItem action.

It looks something like this:

App.WatchlistTilesView.Collection = Ember.CollectionView.extend({
  tagName: "ul",
  itemViewClass: Ember.View.extend({
    attributeBindings: "role",
    role: "tile",
    classNames: ["tile"],
    watchlistBinding: "parentView.watchlist"

    removeItem: ->
      @remove()
      watchlist = @get("watchlist")
      @get("controller").removeSymbol(@content, watchlist)

    templateStock: Ember.Handlebars.compile("
      <button {{action removeItem target="view"}}>Delete</button>
      ...
    "),
  })
});

App.WatchlistTilesController = Ember.Controller.extend({
  account: null,
  watchlists: null,

  removeSymbol: function(entry, watchlist) {
    watchlist.entries.removeObject(entry);
    return WatchlistService.edit(this.account, watchlist);
  }
});

which version of Ember are you using? Anyway, the idea is to send an event to the router with the item as context. Then, the router removes the object from the array, so the `CollectionView` is rerendered without the previously removed item — louiscoquio, Jan 10 '13 at 20:03
Ember v1.0.pre-279-gb1c0b4c. The collection is built by an API call to values in a user account and so the account needs to be updated with the updated array. — mdbiscan, Jan 10 '13 at 20:06
I'm not sure what's included in your Ember version, but you could redirect the `action` to the router (or the controller the `1.0-pre` version does not allow it) with `view.content` as context. Then, the router remove the object from the array (the controller `content`).The action should looks like: `{{action removeItem view.content target="controller"}}` — louiscoquio, Jan 10 '13 at 20:24
Glad you solved the problem! You could put your **edit** as an answer of your question instead of editing your question ;) — louiscoquio, Jan 10 '13 at 21:50

Ember CollectionView - Removing an ItemView

0 Answers0