a memory leak FREE backbone template

backbone_memleak_free.coffee

class Item extends Backbone.Model
  
class ItemList extends Backbone.Collection
  

class ItemView extends Backbone.View

  template : _.template '<%= text %>'

  initialize : ->
    @listenTo @model, 'change', @render
    @listenTo @model, 'destroy', @remove

  render : =>
    @$el.html this.template this.model.toJSON() 
    console.log @$el.html()
    @ 
    
class Board extends Backbone.View

  el : '#container'
  
  initialize : ->
    # Bind events to the collection
    @listenTo @collection, 'add', @add

  add : (item) =>
    # create a new view 
    itemView = new ItemView
      model:item

    # add to board
    @$el.append itemView.render().el

  deleteOne : ->
    target = @collection.shift()
    target.destroy()
    
    

window.App = class App extends Backbone.Router
  initialize : ->
    console.log 'new app!'
    @itemlist = new ItemList
    @itemlist2 = new ItemList

    @board = new Board
      collection:@itemlist

    $('#create').on 'click', =>
      @itemlist.add new Item
        text: 'zombie #'[email protected]

    $('#deleteAll').on 'click', =>
      @board.deleteOne()

    $('#test').on 'click', =>
      for i in [1..1000]
        @itemlist.add new Item
          text: 'zombie #'[email protected]

        @board.deleteOne()

    $('#test2').on 'click', =>
      for i in [1..1000]

        #add
        item = new Item
          text: 'zombie #'[email protected]
        itemView = new ItemView
          model:item
        @itemlist2.add item 
        itemView.render()

        # destroy
        x = @itemlist2.shift()
        x.destroy()