Jump To …

script.coffee

Using a Dedicated View for a Model

We added a model and collection in the previous example, but our main application view still held the structure for our model. We'll add a dedicated view, ItemView, for our Item model. The implementation for this part looks exactly the same as the implementation of Part 3.

jQuery ->
  
  class Item extends Backbone.Model
    
    defaults:
      part1: 'Hello'
      part2: 'Backbone'
  
  
  class List extends Backbone.Collection
    
    model: Item
  
  

The ItemView is now responsible for rendering each Item.

  class ItemView extends Backbone.View
    

tagName is used to create our @el. You can also add className and id properties, but tagName is enough for this simple example.

    tagName: 'li'
    
    initialize: ->
      _.bindAll @
    
    render: ->
      $(@el).html "<span>#{@model.get 'part1'} #{@model.get 'part2'}!</span>"

Returning @ is considered a good practice. It let's us chain method calls (i.e., item_view.render().el).

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

appendItem() no longer renders an individual Item. Rendering is delegated to the render() method of each ItemView instance.

    appendItem: (item) ->

Instantiate a new ItemView using item as the model.

      item_view = new ItemView model: item
      $('ul').append item_view.render().el
    
    events: 'click button': 'addItem'
  
  
  list_view = new ListView

Onward to Part 5.