看来您遇到的是对数据建模的问题。有时退后一步问问自己“我正在处理的事情是什么?”会有所帮助。
您提到的每一行似乎都代表一个“活动”(每个都有一个名称和速率)。您还收集了这些活动,这很好。现在你可能会问,“这整个 ui(由整个屏幕截图表示)代表什么?”。如果我们将这段 ui 称为 ActivitiesView,它可以监听 UI 交互(更改字段),这将更新集合。一旦集合发生变化,它会触发视图以更新的总数重新呈现。
在此示例中,集合上的折扣字段只是一种方便,由集合用于更新其子项。
var Activity = Backbone.Model.extend({
defaults: { discount: 0 }
});
var ActivityCollection = Backbone.Collection.extend({
initialize: function () {
this.on("change:discount", this.updateDiscounts, this);
},
model: activity,
totalAmount: function () { /* ...iterate over items, return total amount, factoring in total */ },
totalHours: function () { /* ...iterate over items, return total hours... */ },
updateDiscounts: function (discount) { /* ...iterate over items, updating each item's discount */}
});
var ActivitiesView = Backbone.View.extend({
events: {
"change input.discount": "applyDicsounts"
},
initialize: function() {
this.listenTo(this.collection, "change", this.render);
this.listenTo(this.model, "change", this.render);
}
render: function() {
this.$el.find('.totalAmount').text(this.collection.totalAmount());
this.$el.find('.totalHours').text(this.collection.totalHours());
},
applyDicsounts: function (e) {
var new_discount = e.target.value; // should probably validate this
this.collection.set({ discount: new_discount });
}
});
var myCollection = new ActivityCollection();
var myActivitiesView = new ActivitiesView({ collection: myCollection });