javascript - Backbone - 集合中所有模型的聚合器事件触发

Question

我正在尝试使用事件聚合器从模型 View 中触发方法。问题是，当我触发 ItemView 的更新或保存方法时，它会迭代集合中的所有模型。如何让它不仅为 View 所代表的模型(或 save 方法的情况下的新模式)正确触发，而且防止它为集合中的每个模型触发？

此应用程序由一组 Items 组成，每个 Item 都有一个模型，该模型呈现为 ItemView 并在页面上列出。如果用户单击 edit 项目图标，则会实例化 ModalView，并将当前 Item 模型数据注入(inject)到 ModalView.

ModalView 加载相应任务的模板。对于本例，我正在加载一个模板来编辑 Item。相关代码总结如下:

var ModalView = Backbone.View.extend({
  tagName: "section",
  className: "modal",
  events: {
    'click .close': 'close',
    'click .minimize': 'minimize',
    'click .maximize': 'maximize',
    'click .save-item': 'saveItem',
  },
  html: null,
  initialize: function(options) {
    this.template = _.template(ModalTemplate);
    this.vent     = options.vent;
  },
  saveItem: function() {
    this.vent.trigger('item.save');
  },
});

项目集合的 View 在这里:

var ItemsView = Backbone.View.extend({
  tagName: 'ul',
  className: 'item-items',
  render: function(){
    var self = this;
    // Make it flex GRRRR
    this.$el.addClass('flex-item');

    this.collection.each(function(item) {
      var date = item.get('created_at');
      var itemView = new ItemView({ model: item, vent: App.vent });
      this.$el.append(itemView.render().el);
    }, this);
    return this;
  }
});

最后，项目模型的 View 包含触发ModalView的编辑方法

var ItemView = Backbone.View.extend({
  tagName: 'li',
  className: 'item',
  events: {
    'click .edit-item': 'edit'
  },
  initialize: function(options) {
    this.template = _.template(ItemTemplate);
    options.vent.bind("item.save", this.save);
    options.vent.bind("item.update", this.update);
  },
  save: function() {
    var attributes, item;
    item = new App.api.item.model();
    attributes = getMeta(true);
    item.save(attributes)
    .done(function(res) {
      Ui.modal.destroy();
      // Re-render items
      App.routers.main.render.User.sidebar();
      App.routers.main.render.Item.items(function() {
        Ui.resizeContent();
      });
    })
    .fail(function(res) {
      console.log(res);
    });
  },
  update: function() {
    console.log('update') // fires App.api.item.collection.length times
    var attributes, item;
    item = App.api.item.collection.get(App.rendered.modal.$el.data('id'));
    attributes = getMeta();
    item.save(attributes)
    .done(function(res) {
      Ui.modal.destroy();
      // Re-render items
      App.routers.main.render.Item.items(function() {
        Ui.resizeContent();
      });
    })
    .fail(function(res) {
      console.log(res);
    });
  },
  edit: function() {
    Ui.modal.new(ItemModalTemplate, this.model.attributes);
    App.rendered.modal.$el.attr('data-id', this.model.get('_id'));
    // New Editor
    var editor  = document.querySelector('#item-editor');

    window.editor = new MediumEditor(editor, editorOptions);
  }
});

显然我在这里遗漏了一些基本的东西，因为 ItemView 的 save 方法中的 console.log('update') 会触发集合中的每件元素。我试图做的是将 save 和 update 的逻辑保留在 Item 的 View 中，以用于组织目的。

非常感谢。

Answer 1

将模型本身保存在 ItemModelView 中，而不是使用选项，这样您就可以直接调用保存而无需事件。

将 Ui.modal.new(ItemModalTemplate, this.model.attributes); 替换为 UI.modal.new(ItemModalTemplate, this.model)，然后this.vent.trigger('item.save'); 与 this.model.save()