Backbone.js rendering a reset collection with a single view <p>I'm trying to render a filtered collection from a single view using a select box using the reset property. First issue is that the select box and the rendered content must all appear in the same div in order to work. Is this normal? Second issue, is that instead showing the filtered results only, it appends the filtered collection to the end of the rendered content instead of replacing it.I know append in my ._each function won't work because it will only append the filtered items to the end of the entire collection. Here's my code sample below:</p> <pre><code>(function($) { var images = [ { tags: "Fun", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'}, { tags: "Chillin", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'}, { tags: "Professional", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'}, { tags: "Education", date : "April 6, 2012", location : 'Home', caption : 'Having fun with my baby'}, { tags: "Home", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'}, { tags: "Professional", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'}, { tags: "Fun", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'}, { tags: "Chillin", date : "April 6, 2012", location : 'Home', caption : 'Having fun with my baby'}, { tags: "Fun", date : "April 3, 2012", location : 'Home', caption : 'Having fun with my lady'}, { tags: "Education", date : "April 4, 2012", location : 'Home', caption : 'At the park with my lady'}, { tags: "Personal", date : "April 5, 2012", location : 'Home', caption : 'At the crib with my lady'}, { tags: "Personal", date : "April 6, 2012", location : 'Home', caption : 'Having a play date'} ]; var Item = Backbone.Model.extend({ defaults : { photo : 'http://placehold.it/200x250' } }); var Album = Backbone.Collection.extend({ model : Item }); var ItemView = Backbone.View.extend({ el : $('.content'), initialize : function() { this.collection = new Album(images); this.render(); $('#filter').append(this.createSelect()); this.on("change:filterType", this.filterByType); this.collection.on('reset', this.render, this); }, template : $('#img_container').text(), render : function() { var tmpl = _.template(this.template); _.each(this.collection.models, function (item) { this.$el.append(tmpl(item.toJSON())); },this); }, events: { "change #filter select" : "setFilter" }, getTypes: function () { return _.uniq(this.collection.pluck("tags"), false, function (tags) { return tags.toLowerCase(); }); }, createSelect: function () { var filter = this.$el.find("#filter"), select = $("&lt;select/&gt;", { html: "&lt;option&gt;All&lt;/option&gt;" }); _.each(this.getTypes(), function (item) { var option = $("&lt;option/&gt;", { value: item.toLowerCase(), text: item.toLowerCase() }).appendTo(select); }); return select; }, setFilter: function (e) { this.filterType = e.currentTarget.value; this.trigger("change:filterType"); }, filterByType: function () { if (this.filterType === "all") { this.collection.reset(images); } else { this.collection.reset(images, { silent: true }); var filterType = this.filterType, filtered = _.filter(this.collection.models, function (item) { return item.get("tags").toLowerCase() === filterType; }); this.collection.reset(filtered); } } }); var i = new ItemView(); })(jQuery); </code></pre>