Question

所以我要做的是以下内容：

我有一个收藏列表视图 <li><a>item</a></li> itemviews。

现在我使用的方法是当我点击项目时它处理项目视图中的点击并添加所选的类，我使用$('.selected').removeClass('selected');

但这感觉不对，我多次想过如何才能做到最好。也许我应该以某种方式使用事件？

思想/实现？

Answer 1

如果每个视图对应一个模型，那么我可能会选择模型并让视图对模型上的更改事件做出反应：

var MyModel = Backbone.Model.extend({
  select: function () {
      // I add select methods instead of having this 
      // set directly on the model in case I want to 
      // control the event firing, for example if I 
      // want to suppress it
      this.set({ selected: true });
  },
  deselect: function () {
      this.set({ selected: false });
  }
});

// where-ever my view is defined:
var MyView = Marionette.ItemView.extend({
    initialize: function () {
        this.listenTo(this.model, 'change:select', this.toggleSelected);
    },
    toggleSelected: function () {
        this.$el.toggleClass('selected');
    }
});

这使模型状态保持分离，并将视图行为的范围仅视为视图的关注点。如果您担心让类的选定状态与模型的选定状态保持同步，您甚至可以自行触发模型选择/取消选择方法，将选定状态作为附加选项传递给触发方法：

select: function () {
    this.trigger('selected', { selected: true });
}

toggleSelected: function (options) {
    this.$el.toggleClass('selected', options.selected);
}

或者您可以在调用toggleClass时实际查询模型的状态：

toggleSelected: function () {
    this.$el.toggleClass('selected', this.model.get('selected'));
}

选择单个视图的最佳方法（其他视图应取消选中）

1 个答案: