/js/coffee/helloworld3.coffee

# Model
window.Item = Backbone.Model.extend(defaults:
  part1: "hello"
  part2: "world"
)

# Collection
window.List = Backbone.Collection.extend(model: Item)

# View
window.ListView = Backbone.View.extend(
  events:
    "click button#add": "addItem"

  initialize: ->
    _.bindAll @

    @collection = new List()
    @collection.bind "add", @appendItem # collection event binder
    @counter = 0
    @render()

  render: ->
    self = @ # Preserve context

    @$el.html _.template $("#template_helloworld2").html(), {}

    @collection.each (item) ->
      self.appendItem item
    , @

    $(".backbone").html @$el

  addItem: ->
    @counter++
    item = new Item()
    item.set part2: item.get("part2") + @counter # modify item defaults
    @collection.add item # add item to collection; view is updated via event 'add'

  appendItem: (item) ->
    $("ul", @$el).append "<li>" + item.get("part1") + " " + item.get("part2") + "</li>"
)