Backbone remove row by ID

Question

I'm trying to remove a row in a table with Backbone. I'm using Rails 4 and the backbone-on-rails gem for this project.

I'm using a addEntryevent to add row in my Movies table. This adds a new row containing a id, movie_title and user_id.

The index view

class Movieseat.Views.MovieseatsIndex extends Backbone.View

  template: JST['movieseats/index'] 

  initialize: -> 
    @collection.on('update', @render, this)
    @collection.on('add', @appendEntry, this)

  render: -> 
    $(@el).html(@template())
    @collection.each(@appendEntry)
    this

  events: -> 
    "click li": "addEntry" 
    "click .remove": "removeEntry" 

  addEntry: (e) -> 
    movie_title = $(e.target).text()
    @collection.create title: movie_title

  removeEntry: (e) -> 
    thisid = @$(e.currentTarget).closest('div').data('id')
    console.log thisid
    @collection.remove thisid

  appendEntry: (entry) ->
    view = new Movieseat.Views.Entry(model: entry)
    $('#entries').append(view.render().el)

When I click on the .remove element I get a console log result showing the id stored in the element I want to remove.

The Entry view

class Movieseat.Views.Entry extends Backbone.View

    template: JST['movieseats/entry']
    className: 'movie-frame'

    render: -> 
      $(@el).html(@template(entry: @model))
      this

This is my index.jst.eco template

<h1>Movies</h1>

<div id="entries"></div>

This is the Entry template I render in the index.jst.eco template (i'm doing this so I only rerender the movie movies added to to the view.

<div class="movie-frame" data-id="<%= @entry.get('id') %>">
    <p><%= @entry.get('title') %></p>
    <p class="remove">Remove</p>
</div>

And my Backbone routes,

class Movieseat.Routers.Movieseats extends Backbone.Router

  routes:
    '': 'index'

  initialize: ->
    @collection = new Movieseat.Collections.Movieseats()
    @collection.fetch()

  index: ->
    view = new Movieseat.Views.MovieseatsIndex(collection: @collection)
    $('#container').html(view.render().el)

But there's no network activity when I click on the .remove element. There is network activity when the addEntry event is triggerd.

Try with removing the indentation, currently addEntry and removeEntry are methods of the events object. Define them as methods of the View itself. — undefined
The indentation was from pasting the code. In my editor the indentation is correct. — Peter Boomsma
Fine. Well, currently the question seems to be unanswerable without having more context. Is .movie-frame child/descendant of the view? — undefined
@Vohuman I've updated my post with some more details. .movie-frame is (so far I can see) just a container renderd by the Entry view. — Peter Boomsma
Could the problem be that in my Movie Rails Controller I haven't defined a destroy method? — Peter Boomsma

Peter Boomsma Peter Boomsma · Accepted Answer · 2014-10-19T11:40:53

So apparently @collection.remove doesn't put out a HTTP request. Changing this to @collection.get(thisid).destroy() does the trick. But you will still need to create a destroy method in your Rails controller,

The removeEntry event in the Backbone view index,

removeEntry: (e) -> 
  thisid = @$(e.currentTarget).closest('div').data('id')
  @collection.get(thisid).destroy()

The destroy method in the Rails controller,

def destroy
  movie = Movie.find_by_id(params[:id])
  movie.destroy

  respond_to do |format|
    format.json {render :json => {:msg => "item deleted!"},:status => 200}
  end

end

Backbone remove row by ID

1 Answers