Backbone.js 多表数据操作
Backbone.js multiple tables data manipulation
我的页面中有 3 个单独的 table,它们都在 View Initialize 中填充并从我的后端 REST Api 获取它们的数据。获取数据后,我将重置绑定到名为 paint
的方法,并在该循环内遍历集合并构建 table.
paintSelected: function (collection, options) {
collection.each(function (ch) {
var view = new ChannelViewDetailed({model: ch});
view.setOwner(collection);
this.$el.find('#selected tr:eq(' + collection.indexOf(ch) + ')').after(view.render().el);
}, this);
},
这会在我定义的下划线模板上构建整个 table。此时一切都很好,我可以处理在此页面上的多个集合之间删除和添加数据。
当我想对此 table 执行 exclude all
或 include all
操作时,事情变得一团糟,视图所有者由于我必须制作的循环而迷路,重复项出现在列表中并且排序丢失。
ChannelViewDetailed = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#tpl-channel-row-detailed').html()),
events: {
'click td.del': 'deleteSelected'
},
setOwner: function (collection) {
this.owner = collection;
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteSelected: function (e) {
e.preventDefault();
this.owner.remove(this.model);
this.remove();
}
});
请注意,上面提到的所有内容在执行每个项目操作时都可以正常工作,但是当我不想执行批处理(包括所有/排除所有)操作时,无法按预期工作。
这是我尝试完成的排除所有方法的示例。
excludeAllChannels: function (e) {
e.preventDefault();
var self = this;
if (!$.isEmptyObject(self.selected)) {
_.each(this.selected.models, function (item, index, items) {
self.selected.remove(item);
});
$('#in-channels tr').has('td').remove();
unsavedState = true;
}
}
修改当前正在循环的数组可能会导致意外结果。
https://jsfiddle.net/c0xpzq6v/
var a = new Backbone.Collection(data);
_.each(a.models, function(item) { a.remove(item); });
可以用以下任何一种代替
_.each(_.clone(a.models), function(item) { a.remove(item); });
a.remove(a.models);
a.reset();
我的页面中有 3 个单独的 table,它们都在 View Initialize 中填充并从我的后端 REST Api 获取它们的数据。获取数据后,我将重置绑定到名为 paint
的方法,并在该循环内遍历集合并构建 table.
paintSelected: function (collection, options) {
collection.each(function (ch) {
var view = new ChannelViewDetailed({model: ch});
view.setOwner(collection);
this.$el.find('#selected tr:eq(' + collection.indexOf(ch) + ')').after(view.render().el);
}, this);
},
这会在我定义的下划线模板上构建整个 table。此时一切都很好,我可以处理在此页面上的多个集合之间删除和添加数据。
当我想对此 table 执行 exclude all
或 include all
操作时,事情变得一团糟,视图所有者由于我必须制作的循环而迷路,重复项出现在列表中并且排序丢失。
ChannelViewDetailed = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#tpl-channel-row-detailed').html()),
events: {
'click td.del': 'deleteSelected'
},
setOwner: function (collection) {
this.owner = collection;
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteSelected: function (e) {
e.preventDefault();
this.owner.remove(this.model);
this.remove();
}
});
请注意,上面提到的所有内容在执行每个项目操作时都可以正常工作,但是当我不想执行批处理(包括所有/排除所有)操作时,无法按预期工作。
这是我尝试完成的排除所有方法的示例。
excludeAllChannels: function (e) {
e.preventDefault();
var self = this;
if (!$.isEmptyObject(self.selected)) {
_.each(this.selected.models, function (item, index, items) {
self.selected.remove(item);
});
$('#in-channels tr').has('td').remove();
unsavedState = true;
}
}
修改当前正在循环的数组可能会导致意外结果。
https://jsfiddle.net/c0xpzq6v/
var a = new Backbone.Collection(data);
_.each(a.models, function(item) { a.remove(item); });
可以用以下任何一种代替
_.each(_.clone(a.models), function(item) { a.remove(item); });
a.remove(a.models);
a.reset();