0

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

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

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

这里的实际问题：

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

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

http://i.imgur.com/J3uyilH.png

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

4

1 回答 1

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 });
于 2013-03-13T16:39:18.560 回答