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

赛斯

我正在尝试使用事件聚合器从模型的视图中触发方法。问题是,当我为触发update或save方法时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;
  }
});

最后,项目模型的视图包含触发该方法的edit方法 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')集合中每个项目saveItemView解雇方法中我试图做的是保持了逻辑save,并update在视图中Item用于组织的目的。

非常感谢。

用户名

除了使用选项ItemModelView,还可以将模型本身保留在其中,因此您可以直接调用save而不需要事件。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章