Databases
StackOverflow2013
Postsdbo
POBackbone.js rendering a reset collection with a single view
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.js rendering a reset collection with a single view
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload