我正在尝试使用事件聚合器从模型的视图中触发方法。问题是,当我为触发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')
在集合中每个项目save
的ItemView
解雇方法中。我试图做的是保持了逻辑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] 删除。
我来说两句