主干-如何重构此代码以防止重影视图

Backbone - how to refactor this code to prevent ghost views?

本文关键字：代码 视图 重影 何重构 重构 主干      更新时间：2023-09-26

我有一组绑定到Backbone集合的闪卡。一旦我得到集合，我就会创建一个玩家模型的实例。

然后用户可以使用"；下一个"；以及"；先前的"；按钮。我做这件事的第一步，我认为很简单，就是把抽认卡传给这样的玩家。

不幸的是，这种设计导致每次单击下一个和上一个按钮事件时都会绑定它们。因此，例如，在第一次单击下一个按钮后，事件开始触发多次。我读过一些关于幽灵视图的文章，但不知道如何将下面的代码分解成一块，以帮助我防止幽灵视图问题。

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 <= 0){
        console.log("no less");
    }
    this.set({
        'currentCardIndex': currentFlashCardIndex--
    });
    this.showCard();
},
nextFlashCard: function(){
    var currentFlashCardIndex = parseInt(this.get('currentCardIndex'), 10);
    if(currentFlashCardIndex >= this.collection.length){
        console.log("no more");
    }
    currentFlashCardIndex = currentFlashCardIndex + 1;
    this.set({
        'currentCardIndex': currentFlashCardIndex
    });
    console.log(this.get('currentCardIndex'));
    this.showCard();
 }
}); 

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();
}
});

script#playerTemplate(type="text/template")
<div id="state"></div>
<div id="previous">Previous</div>
<div id="card">
   <h2><%= question %></h2>
    <h3><%= answer %></h3> 
</div>
<div id="next">Next</div>

每次显示新卡时，都会创建一个新的Quiz.Views.FlashCardPlayer实例。这些实例中的每一个都有自己的事件处理，因此每个实例都绑定到相同的#next和#previous元素。

我认为这里有几个概念问题：

  • 您只需要一个FlashCardPlayer视图，它应该绑定下一个/上一个元素上的事件。你可能应该有一个单独的FlashCard视图，它显示一张牌，玩家可以在按下下一个/上一个按钮时交换这些视图。一般来说，如果您有一个id的元素，那么您应该只使用一个视图实例对其进行一次渲染和绑定，否则您最终会遇到与现在相同的问题。

  • 您试图在FlashCardPlayer模型中加入太多内容。通常，模型应该只知道它们的数据，而不知道用于显示它们的视图（部分原因是一个模型可能需要在各种视图中显示）。我不介意在模型上使用nextFlashCard()和previousFlashCard()方法，因为这仍然是存储集合数据的领域，但showCard()方法确实直接进入了视图领域，因为它处理表示逻辑。一个更好的想法是让视图绑定到模型上的change:currentCardIndex事件，并使用this.model.get('currentCardIndex'))（或新的getCurrentCard()方法）来处理新卡的显示。

相关文章：