Question

我尝试使用事件聚合器从模型的视图中触发方法。问题是，当我触发ItemView的更新或保存方法时，它会遍历集合中的所有模型。我如何才能使它不仅适用于视图所代表的模型（或save方法案例中的新模态），而且还阻止它为集合中的每个模型触发？

此应用程序由Items的集合组成，每个Item都有一个模型，该模型呈现为ItemView并在页面上列出。如果用户点击edit项目图标，则会ModalView实例化，并将当前Item模型数据注入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');
  },
});

项目集合的视图在这里：

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

最后，项目模型的视图包含触发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);
  }
});

显然我错过了一些基本的东西，因为console.log('update')的{{1}}方法中的save会触发集合中的每个项目。我想要做的是在ItemView的视图中保留save和update的逻辑以用于组织目的。

非常感谢。

Answer 1

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

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

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

1 个答案: