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 回答