Destroy Collection in Backbone

by bryandowning

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<div id="controls">
    <a href="#" class="active">show all people</a>
    <br>
    <a href="#" data-zip="12345">show people in zip 12345</a>
    <br>
    <a href="#" data-zip="98765">show people in zip 98765</a>
</div>
<div id="main"></div>




<script type="text/template" id="PhoneBookEntry">
<p>NAME: <%=name%> - ZIP: <%=zip%> - PHONE: <%=phone%></p>    
</script>

CSS

body { font-family: monospace }
a { color: blue }
.active { font-weight: bold }
#phoneBook {
    margin: 16px;
    padding: 16px;
    border: 1px solid gray;
}
#controls {
    margin: 16px;
}

CoffeeScript

APP = new Marionette.Application

APP.addRegions mainRegion: '#main'

# Data
APP.list = [
    name: "Alice"
    zip: 12345
    phone: '123-456-1111'
,
    name: "Brice"
    zip: 12345
    phone: '123-456-2222'
,
    name: "Cindy"
    zip: 98765
    phone: '123-456-3333'
,
    name: "Daryl"
    zip: 98765
    phone: '123-456-4444'
]

# Models
class Person extends Backbone.Model

class People extends Backbone.Collection
    model: Person
    
    initialize: ()->
        # Must specify a context!!!
        APP.vent.on 'filterPeople', @filterPeople, this
    
    filterPeople: ( zip )=>
        console.log 'People.filterPeople fired!', zip
        
        freshPeople = new People APP.list
        
        if not zip
            @reset freshPeople.models
            freshPeople.destroy()
            return this

        filteredPeople = freshPeople.filter ( person )->
            person.get('zip') is zip
            
        freshPeople.destroy();
        @reset filteredPeople
        
    destroy: ()->
        # Remove all handlers for all events for this
        APP.vent.off null, null, this
        
        
        
# Views        
class PhoneBookEntry extends Marionette.ItemView
    tagName: 'li'
    template: '#PhoneBookEntry'
    
class PhoneBook extends Marionette.CollectionView
    tagName: 'ul'
    id: 'phoneBook'
    itemView: PhoneBookEntry
    
class Controls extends Marionette.ItemView
    el: '#controls'
    events:
        'click a': 'filterPeople'
        
    filterPeople: ( e )=>
        e.preventDefault()
        $el = $(e.target)
        
        @$el.find('a').removeClass 'active'
        $el.addClass 'active'
        
        APP.vent.trigger 'filterPeople', $el.data('zip')
    
    


APP.addInitializer ( data )->
    people = new People data
    phoneBook = new PhoneBook collection: people
    controls = new Controls

    APP.mainRegion.show phoneBook

    $('a').on 'click', phoneBook.filterPeople


APP.start APP.list