在 Backbone.Marionette 上更新多个模型
Updating multiple models on Backbone.Marionette
使用 Marionette 和 Coffeescript。
我正在努力让用户在视图模型上选中一个框,然后更改所有选中模型上的一个属性(例如,就像您在 Gmail 中所做的那样)。
现在我正计划将复选框的 ID 设置为模型的 ID,并使用 jQuery 获取所有选中框的 ID,并一次更新一个模型,可能是通过一个函数在接收 ID 数组和要更改的属性的 collection 上。
我的问题是:这样做有没有特别巧妙的 'Backbone way'?或者有什么建议吗?原谅我的笼统,我不太了解 backbone 方式,我的 google 搜索结果并不多。
编辑
所以我最终像下面那样做了。我在 checks/unchecks 所有复选框的视图上也有一个 selectAll 和 deselectAll 。我没有更新模型以反映选中或未选中,因为这似乎是不必要的,因为选中状态由于任何原因都没有保留,而且似乎在 selectAll 或 deselectAll 上大规模更新模型是不必要的工作。复选框的 ID 是该视图的模型 ID。
collection:
class MyCollection extends Backbone.Collection
model: MyModel
....
batchSave: (ids, attrs) ->
for id in ids
@get(id).save attrs, patch: true
可见:
class MyComposite extends Marionette.CompositeView
events:
'click .batch-attribute a' : 'attributeSelected'
prioritySelected: (e) ->
e.preventDefault()
ids = $('.edit-select:checked').map( -> @id ).get()
attr = {attr: e.currentTarget.dataset.value}
@collection.batchSave ids, attr
理想情况下,您将拥有一个集合视图和一堆项目视图,如下所示:
var Checks = Backbone.Collection.extend({});
var checks = new Checks([{}, {}, {}]);
var CheckView = Backbone.View.extend({
initialize: function() {
this.render();
},
events: {
'click input': 'check'
},
render: function() {
this.$el.append('<input type="checkbox">').appendTo('body');
},
check: function(event) {
this.model.set('selected ', $(event.target).is(':checked'));
}
});
checks.each(function(model) {
new CheckView({
model: model
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
每个项目视图负责将其模型标记为已选中。稍后您可以简单地从集合视图中找到所选模型,例如 this.collection.where({selected:true});
使用 Marionette 和 Coffeescript。
我正在努力让用户在视图模型上选中一个框,然后更改所有选中模型上的一个属性(例如,就像您在 Gmail 中所做的那样)。
现在我正计划将复选框的 ID 设置为模型的 ID,并使用 jQuery 获取所有选中框的 ID,并一次更新一个模型,可能是通过一个函数在接收 ID 数组和要更改的属性的 collection 上。
我的问题是:这样做有没有特别巧妙的 'Backbone way'?或者有什么建议吗?原谅我的笼统,我不太了解 backbone 方式,我的 google 搜索结果并不多。
编辑
所以我最终像下面那样做了。我在 checks/unchecks 所有复选框的视图上也有一个 selectAll 和 deselectAll 。我没有更新模型以反映选中或未选中,因为这似乎是不必要的,因为选中状态由于任何原因都没有保留,而且似乎在 selectAll 或 deselectAll 上大规模更新模型是不必要的工作。复选框的 ID 是该视图的模型 ID。
collection:
class MyCollection extends Backbone.Collection
model: MyModel
....
batchSave: (ids, attrs) ->
for id in ids
@get(id).save attrs, patch: true
可见:
class MyComposite extends Marionette.CompositeView
events:
'click .batch-attribute a' : 'attributeSelected'
prioritySelected: (e) ->
e.preventDefault()
ids = $('.edit-select:checked').map( -> @id ).get()
attr = {attr: e.currentTarget.dataset.value}
@collection.batchSave ids, attr
理想情况下,您将拥有一个集合视图和一堆项目视图,如下所示:
var Checks = Backbone.Collection.extend({});
var checks = new Checks([{}, {}, {}]);
var CheckView = Backbone.View.extend({
initialize: function() {
this.render();
},
events: {
'click input': 'check'
},
render: function() {
this.$el.append('<input type="checkbox">').appendTo('body');
},
check: function(event) {
this.model.set('selected ', $(event.target).is(':checked'));
}
});
checks.each(function(model) {
new CheckView({
model: model
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
每个项目视图负责将其模型标记为已选中。稍后您可以简单地从集合视图中找到所选模型,例如 this.collection.where({selected:true});