Backbone 按 ID 删除行

Question

我正在尝试使用 Backbone 删除表格中的一行。我正在为这个项目使用 Rails 4 和 Backbone-on-rails gem。

我正在使用 addEntryevent 在我的 Movies 表中添加行。这会添加一个包含 id、movie_title 和 user_id 的新行。

索引视图

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)

当我点击 .remove 元素时，我会得到一个控制台日志结果，显示存储在我要删除的元素中的 id。

条目视图

class Movieseat.Views.Entry extends Backbone.View

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

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

这是我的 index.jst.eco 模板

<h1>Movies</h1>

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

这是我在 index.jst.eco 模板中渲染的 Entry 模板（我正在这样做，所以我只重新渲染添加到视图中的电影电影。

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

还有我的主干路由，

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)

但是当我点击 .remove 元素时没有网络活动。 addEntry 事件触发时有网络活动。

Answer 1

显然@collection.remove 没有发出 HTTP 请求。将其更改为 @collection.get(thisid).destroy() 就可以了。但是你仍然需要在 Rails 控制器中创建一个 destroy 方法，

Backbone 视图索引中的 removeEntry 事件，

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

Rails 控制器中的destroy方法，

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