javascript - Backbone.js:如何仅处理单个 View 的选择？

Question

我遇到了以下问题:

我有一个模型，其属性定义了它是否被明显选中，出于这个问题的目的，我将其称为 SelectModel。

SelectModel = Backbone.Model.extend({
defaults:{
 isSelected: false
}
})

现在我没有真正理解的第一部分是我应该如何处理一般的选择。如果我想使用观察者模式，我的 View 应该监听 isSelected 属性的变化。但我的观点也首先触发了这一点，所以我会的。

SelectView = Backbone.View.extend({
initialize: function(){
this.model.bind("change:isSelected", this.toggleSelectionVisually)
},

events: {
"click" : toggleSelection
},

toggleSelection: function(){
this.model.set({"isSelected": !this.model.get("isSelected");
},

toggleSelectionVisually:(){
//some code that shows that the view is now selected
},
})

所以这本身就感觉有点荒谬，但我想我只是理解错了。

但是在不让我的代码变得糟糕的情况下，我真正未能实现的部分是处理一次只选择一个模型的多个模型的选择。

SelectListView = Backbone.View.extend({
initialize: function(){
this.collection = new SelectList();
},

toggleSelection: function(){
????
}   
})

那么谁应该将选择更改通知谁？哪一部分应该触发它，哪一部分应该监听？我真的坚持这个。对于单个 View ，这是可行的，对于一个集合，我很遗憾地迷路了。

Answer 1

在我看到您问题的第二部分之前，我会建议对您的 SelectView 进行以下简化:

SelectView = Backbone.View.extend({
  events: {
    "click" : toggleSelection
  },

  toggleSelection: function(){
    this.model.set({"isSelected": !this.model.get("isSelected");
    //some code that shows whether the view is selected or not
  }
});

但是，由于 isSelected 属性显然是相互排斥的，可以在打开另一个属性时隐式关闭，我认为您拥有它的方式最适合您的情况。

因此，使用您现有的 SelectView，您可以拥有一个 SelectListView，如下所示。 警告:每次选择一个模型时，它都会遍历整个模型集合。如果您将拥有大量模型，这将无法很好地扩展，您将希望缓存之前选择的模型而不是遍历整个集合。

SelectListView = Backbone.View.extend({
  initialize: function(){
    this.collection = new SelectList();
    this.collection.bind('change:isSelected', this.toggleSelection, this);
  },

  toggleSelection: function(toggledModel){
    //A model was toggled (on or off)
    if(toggledModel.get('isSelected') {
      //A model was toggled ON, so check if a different model is already selected
      var otherSelectedModel = this.collection.find(function(model) {
        return toggledModel !== model && model.get('isSelected');
      });

      if(otherSelectedModel != null) {
        //Another model was selected, so toggle it to off
        otherSelectedModel.set({'isSelected': false});
      }
    }
  }   
});