Databases
StackOverflow2013
Postsdbo
POBackbone.js view content keep multiplying instead of clearing
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone.js view content keep multiplying instead of clearing
    text
    copied!<p>I'am new to Backbone.js and this problem has really got me stumped. </p> <p>A view is built up from a collection, the collection results are filtered to place each set of results into their own array and then I make another array of the first items from each array, these are the 4 items displayed.</p> <p>This works fine the first time the page is rendered but when I navigate away from this page and then go back the page now has 8 items, this pattern of adding 4 continues everytime I revisit the page.</p> <pre><code> // Locatore List Wrapper var LocatorPageView = Backbone.View.extend({ postshop: [], postbox: [], postboxlobby: [], postboxother: [], closestPlaces: [], el: '&lt;ul id="locator-list"&gt;', initialize:function () { this.model.bind("reset", this.render, this); }, render:function (eventName) { //console.log(this) // Loop over collecion, assigining each type into its own array this.model.models.map(function(item){ var posttype = item.get('type').toLowerCase(); switch(posttype) { case 'postshop': this.postshop.push(item); break; case 'postbox': this.postbox.push(item); break; case 'postbox lobby': this.postboxlobby.push(item); break; default: this.postother.push(item); } return ; }, this); // Create a closest Places array of objects from the first item of each type which will be the closest item if (this.postshop &amp;&amp; this.postshop.length &gt; 0) { this.closestPlaces.push(this.postshop[0]); } if (this.postbox &amp;&amp; this.postbox.length &gt; 0) { this.closestPlaces.push(this.postbox[0]); } if (this.postboxlobby &amp;&amp; this.postboxlobby.length &gt; 0) { this.closestPlaces.push(this.postboxlobby[0]); } if (this.postother &amp;&amp; this.postother.length &gt; 0) { this.closestPlaces.push(this.postother[0]); } // Loop over the Closest Places array and append items to the &lt;ul&gt; contianer _.each(this.closestPlaces, function (wine) { $(this.el).append(new LocatorItemView({ model:wine }).render().el); }, this); return this; } }) // Locator single item var LocatorItemView = Backbone.View.extend({ tagName:"li", template:_.template($('#singleLocatorTemplate').html()), render:function (eventName) { $(this.el).html(this.template(this.model.toJSON())); return this; }, events: { "click .locator-map": "loadMap" }, loadMap: function(e) { e.preventDefault(); // Instantiate new map var setMap = new MapPageView({ model: this.model, collection: this.collection }); var maptype = setMap.model.toJSON().type; App.navigate('mappage', {trigger:true, replace: true}); setMap.render(); App.previousPage = 'locator'; } }); window.App = Backbone.Router.extend({ $body: $('body'), $wrapper: $('#wrapper'), $header: $('#header'), $page: $('#pages'), routes: { '' : '', 'locator': 'locator' }, locator:function () { this.$page.empty(); // Empty Page this.places = new LocatorPageCollection(); // New Collection this.placeListView = new LocatorPageView({model:this.places}); // Add data models to the collection this.places.fetch(); this.$page.html(this.placeListView.render().el); // Append the renderd content to the page header.set({title: 'Locator'}); // Set the page title this.$body.attr('data-page', 'locator'); // Change the body class name this.previousPage = ''; // Set previous page for back button } }); </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