Databases
StackOverflow2013
Postsdbo
POBackbone - how to refactor this code to prevent ghost views?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone - how to refactor this code to prevent ghost views?
    text
    copied!<p>I have a collection of flash cards that are tied to a Backbone collection. Once I get the collection, I create an instance of a player model.</p> <p>Then the user can navigate through the rest of the flash cards using the "next" and "previous" buttons. My first stab in doing this which I thought was simple was to pass the flashCards to a player like this.</p> <p>Unfortunately, this design is causing the next and previous button events to be bound every time they are clicked. So, after the first time clicking on the next button for example, the event starts firing more than once. I read somewhere about ghost views, but could not exactly figure out how I can break the code below into a chunk that will help me prevent the ghost view issue.</p> <pre><code>var flashCards = new Quiz.Collections.FlashCards({ id: this.model.get('card_set_id') }); Quiz.player = new Quiz.Models.FlashCardPlayer({ collection: flashCards }) Quiz.Models.FlashCardPlayer = Backbone.Model.extend({ defaults: { 'currentCardIndex': 0 }, initialize: function(){ this.collection = this.get('collection'); this.showCard(); }, showCard: function(){ var flashCard = this.collection.at(this.get('currentCardIndex')); var cardView = new Quiz.Views.FlashCardPlayer({ model: flashCard }); }, currentFlashCard: function(){ return this.get('currentCardIndex'); }, previousFlashCard: function(){ var currentFlashCardIndex = parseInt(this.get('currentCardIndex'), 10); if(currentFlashCardIndex &lt;= 0){ console.log("no less"); } this.set({ 'currentCardIndex': currentFlashCardIndex-- }); this.showCard(); }, nextFlashCard: function(){ var currentFlashCardIndex = parseInt(this.get('currentCardIndex'), 10); if(currentFlashCardIndex &gt;= this.collection.length){ console.log("no more"); } currentFlashCardIndex = currentFlashCardIndex + 1; this.set({ 'currentCardIndex': currentFlashCardIndex }); console.log(this.get('currentCardIndex')); this.showCard(); } </code></pre> <p>}); </p> <pre><code>Quiz.Views.FlashCardPlayer = Backbone.View.extend({ el: $('#cardSet'), tagName: 'div', _template: _.template($('#playerTemplate').html()), initialize: function(){ console.log("in view flashcardplayer", this); this.render(); }, events: { 'click #previous': 'getPreviousCard', 'click #next': 'getNextCard' }, render: function(){ $(this.el).html(this._template(this.model.toJSON())); return this; }, getPreviousCard: function(){ this.close(); Quiz.player.previousFlashCard(); }, getNextCard: function(){ this.close(); Quiz.player.nextFlashCard(); } </code></pre> <p>});</p> <pre><code>script#playerTemplate(type="text/template") &lt;div id="state"&gt;&lt;/div&gt; &lt;div id="previous"&gt;Previous&lt;/div&gt; &lt;div id="card"&gt; &lt;h2&gt;&lt;%= question %&gt;&lt;/h2&gt; &lt;h3&gt;&lt;%= answer %&gt;&lt;/h3&gt; &lt;/div&gt; &lt;div id="next"&gt;Next&lt;/div&gt; </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