制作一个模型的最佳方式'选择'Backbone.js系列中

Best way to make one model 'selected' in a Backbone.js collection?

本文关键字：选择 Backbone 系列 js 方式 最佳 模型 一个      更新时间：2023-09-26

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

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

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

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

selected: false

当它悬停在上面或用键盘选择时，这将是

selected: true

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

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

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

因此，考虑将这一责任作为一个协会放在藏品上。因此，这个.selected将指向选定的模型。然后，您可以添加一个方法来返回集合中的选定模型。

或者，您可以将此责任交给视图。如果模型的可选性纯粹是视图层中的一个问题，则可以执行此操作。

从模型中删除责任的副产品是，当选择新模型时，您不需要在整个集合中循环。

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

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

我做了Eisenhauer先生建议的事情。我也想要分页数据的概念。我真的不想把选定的、页码等混合到集合本身中，所以我为表数据创建了一个"模型"，并称之为快照。类似这样的东西：

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

查看Backbone.CollectionView，它支持在开箱即用时选择模型。可以使用setSelectedModel方法实现的悬停情况。

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

  • 主干。选择
  • Backbone.Cycle

主干。Select具有最小的表面积。将尽可能少的方法添加到对象中。这个想法是你应该能够使用Backbone。几乎在任何地方都选择混合，冲突的风险几乎为零。

Backbone.Cycle建立在Backbone.Select.之上。它添加了导航方法和更多的提示。这可能是绿地项目的更好选择。

相关文章：