在 Backbone.js 集合中“选择”一个模型的最佳方法？答案

【问题标题】：Best way to make one model 'selected' in a Backbone.js collection?在 Backbone.js 集合中“选择”一个模型的最佳方法？
【发布时间】：2011-09-25 02:05:57
【问题描述】：

我的 Backbone.js 应用程序中有一组模型。

这是一个项目列表，您可以将鼠标悬停在上面或使用键盘进行导航。

如果鼠标悬停，或者如果键盘导航选择了项目，它们都会做同样的事情：将特定项目/模型设置为“已选择”。

所以在我的模型中，我有一个属性基本上叫做

selected: false

当它悬停或用键盘选择时，它将是

selected: true

但是，确保当这个模型为真时，其他模型都为假的最佳方法是什么？

我目前正在做一个基本的事情，即循环浏览集合中的每个模型，然后将所选模型设置为 true。但我想知道是否有更好、更有效的方法来做到这一点？

【问题讨论】：

标签： javascript collections models backbone.js

【解决方案1】：

被选中似乎是模型范围之外的责任。 selected 的概念意味着还有其他人，但模型只能担心自己。因此，我会考虑将这一职责转移到其他地方，在这种情况下，许多模型和选择一个模型的概念似乎更自然和预期。

因此，请考虑将此责任作为关联放在集合上。因此， this.selected 将指向所选模型。然后你可以添加一个方法来返回集合中的选定模型。

或者，您可以将此责任赋予视图。如果模型的选择只是视图层中的一个问题，您可能会这样做。

The by-product of removing the responsibility from the model is that you eliminate the need to cycle through the entire collection when a new model becomes selected.

【讨论】：

谢谢。这更有意义。我被带走了，没有花时间更深入地思考事情应该去哪里。

【解决方案2】：

这就是我的做法。该集合存储对选定模型的引用，但状态保存在模型中。然后可以对其进行调整，以允许使用更复杂的算法来选择选择哪些模型。

JobSummary = Backbone.Model.extend({

  setSelected:function() {
    this.collection.setSelected(this);
  }

});

JobSummaryList = Backbone.Collection.extend({
   model: JobSummary,

   initialize: function() {
     this.selected = null;
   },

   setSelected: function(jobSummary) {
     if (this.selected) {
       this.selected.set({selected:false});
     }
     jobSummary.set({selected:true});
     this.selected = jobSummary;
   }
};

【讨论】：

【解决方案3】：

我做了艾森豪尔先生建议的事情。我也想要分页数据的概念。并不是真的想将选定的页码等混入集合本身，所以我为表数据创建了一个“模型”并将其称为快照。像这样的：

JobSummary = Backbone.Model.extend({});

JobSummaryList = Backbone.Collection.extend({
   model: JobSummary
};

JobSummarySnapshot = Backbone.Model.Extend({
   defaults: {
     pageNumber: 1,
     totalPages: 1,
     itemsPerPage: 20,
     selectedItems: new JobSummaryList(), // for multiple selections
     jobSummaryList: new JobSummaryList()
   }
});

【讨论】：

应该谨慎使用默认值，记住它们在所有 JobSummarySnapshot 实例中都被引用。如果您使用像 Number/String 这样的原语，这不是问题，但是当 JobSummaryList.

【解决方案4】：

查看Backbone.CollectionView，其中包括对开箱即用时选择模型的支持。您可以使用setSelectedModel 方法实现悬停案例。

【讨论】：

【解决方案5】：

你可能想看看我的两个组件：

Backbone.Select 具有最小的表面积。将尽可能少的方法添加到您的对象中。这个想法是，您应该能够在几乎任何地方使用 Backbone.Select mixins，而且冲突风险几乎为零。

Backbone.Cycle 建立在 Backbone.Select 之上。它添加了导航方法和更多的花里胡哨。对于新建项目来说，这可能是更好的选择。

【讨论】：