Backbone.js 两个模型相互影响

Question

我有一个表，它的行是集合中的模型，每行有两列输入，每小时费率和小时数，模型也有属性total，基本上只是rate_per_hour*hours，它正在更新为用户更改小时数或每小时费率。您也可以添加新行并删除它们。这一点，我相信，我设法做到了正确的主干方式。

现在我不确定第一部分，我需要一个包含小时和总和的 div，我也设法做到了这一点，使用一个函数（它基本上只是通过集合中的模型循环，总和他们的属性，然后使用 jquery 更新我的 div），更改模型上的事件，在设置新属性后，正在调用此函数。它在所有视图/集合/模型之外。不确定这是否是正确的做法，但它确实有效。

现在最糟糕的部分是我惨败，意识到我的代码可能从一开始就错了。在带有总计的 div 下是另一个输入，称为折扣，它应该做的是计算折扣百分比((value of discount/my total sum)*100)，然后更新表中的费率，以便显示旧的和应用了折扣的费率。

这里的实际问题：

我不明白的是，我应该如何将底部（总计和折扣 - 见截图）与上部连接起来，底部是否应该是另一个模型，具有属性总计、折扣和小时数，并拥有它自己视图而不是一个简单的 div？但是它是如何工作的，一个模型（折扣）如何影响集合中的模型，反之亦然，添加一行需要影响总数和折扣百分比？

这是我尚未使用骨干网的纯 jquery 版本应该如何工作的屏幕截图。

如果需要也将发布代码，但现在我尝试使用 jquery 事件、包含这些总数和 shizzle wizzle 的我自己的简单对象来解决它有点臃肿。

Answer 1

您遇到的问题似乎是数据建模。有时退后一步问问自己“我正在处理的事情是什么？”会有所帮助。

您提到的每一行似乎都代表一个“活动”（每行都有一个名称和速率）。您还收集了这些活动，这很好。现在你可能会问，“这整个 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 });