JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<button id="rename">rename items</button>
<button id="teardown">tear it down</button>

CoffeeScript

class Item extends Backbone.Model

class Items extends Backbone.Collection
  model: Item

class ListView extends Backbone.View

  className: 'list'
  tagName: 'ul'

  initialize: ->
    @listenTo @collection, 'reset', @addAll

  addOne: (item) ->
    view = new ItemView(model: item)
    # the item view will listen for the clean_up event on the list_view
    # and clean up after itself and remove itself from the dom
    view.listenTo(this, 'clean_up', view.remove)
    @$el.append(view.render().el)

  addAll: ->
    # clear out any existing ItemViews when resetting the collection
    @removeItemViews()
    @collection.each(@addOne, this)

  render: ->
    @addAll()
    this
    
  remove: ->
    # when the ListView is being removed, it must clean up it's children
    @removeItemViews()
    super()
    
  removeItemViews: ->
    # let the children know it's time to put away their toys.
    @trigger 'clean_up'

class ItemView extends Backbone.View

  className: 'item'
  tagName: 'li'

  events:
    'click' : 'remove'

  initialize: ->
    @listenTo @model, 'change:name', @updateName

  updateName: ->
    console.log 'updateName'
    @$el.html(@model.get('name'))

  render: ->
    @$el.html(@model.get('name'))
    this

$ ->
  items = [1..5].map (i) -> { name: "Item #{i}" }
  collection = new Items(items)

  listView = new ListView(collection: collection)
  $('body').append(listView.render().el)

  $('#teardown').on 'click', ->
    if listView?
        listView.remove()
        listView = null # 'release' listView

  $('#rename').on 'click', ->
    collection.each (item) ->
      item.set('name', new Date().getTime())