Backbone按ID删除行

时间:2014-10-19 09:43:57

标签: javascript jquery mysql ruby-on-rails backbone.js

我正在尝试使用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>

我的Backbone路线,

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事件时会有网络活动。

1 个答案:

答案 0 :(得分: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