Jump To …


Adding Actions to a View

Our models have been pretty lifeless so far. We'll attach some actions to our Items for some dynamic goodness. Take a look at the implementation before getting started.

jQuery ->
  class Item extends Backbone.Model
      part1: 'Hello'
      part2: 'Backbone'
  class List extends Backbone.Collection
    model: Item
  class ItemView extends Backbone.View
    tagName: 'li'

initialize() binds change and remove to @render and @unrender, respectively.

    initialize: ->
      _.bindAll @
      @model.bind 'change', @render
      @model.bind 'remove', @unrender

render() now includes two extra spans for swapping and deleting an item.

    render: =>
      $(@el).html """
        <span>#{@model.get 'part1'} #{@model.get 'part2'}!</span>
        <span class="swap">swap</span>
        <span class="delete">delete</span>

unrender() removes the calling list item from the DOM. This uses jQuery's remove() method.

    unrender: =>

swap() interchanges an Item's attributes. The set() model function triggers the change event.

    swap: ->
        part1: @model.get 'part2'
        part2: @model.get 'part1'

remove() calls the model's destroy() method, removing the model from its collection. destroy() would normally delete the record from its persistent storage, but we'll override this in Backbone.sync below.

    remove: -> @model.destroy()

ItemViews now respond to two click actions for each Item.

      'click .swap': 'swap'
      'click .delete': 'remove'

We no longer need to modify the ListView because swap and delete are called on each Item.

  class ListView extends Backbone.View
    el: $ 'body'
    initialize: ->
      _.bindAll @
      @collection = new List
      @collection.bind 'add', @appendItem
      @counter = 0
    render: ->
      $(@el).append '<button>Add Item List</button>'
      $(@el).append '<ul></ul>'
    addItem: ->
      item = new Item
      item.set part2: "#{item.get 'part2'} #{@counter}"
      @collection.add item
    appendItem: (item) ->
      item_view = new ItemView model: item
      $('ul').append item_view.render().el
    events: 'click button': 'addItem'

We'll override Backbone.sync since we're not making any calls to the server when we change our model.

  Backbone.sync = (method, model, success, error) ->

Perform a NOOP when we successfully change our model. In our example, this will happen when we remove each Item view.

  list_view = new ListView