0

私はテーブルを持っています、その行はコレクション内のモデルであり、各行には入力を含む2つの列があり、時間あたりのレートと時間、モデルにも属性がありますtotal。これは基本的にただrate_per_hour*hoursであり、ユーザーが時間または時間あたりのレートを変更すると更新されます。新しい行を追加したり、削除したりすることもできます。これは、私が正しいバックボーンの方法を行うことができたと信じています。

最初の部分はよくわかりません。時間と合計の合計を含む div が必要です。また、関数を使用してこれを行うこともできました (基本的に、コレクション内のモデルをループし、それらの属性を合計し、次に、jquery を使用して div を更新します)、モデルのイベントを変更し、新しい属性を設定した後、この関数を呼び出しています。すべてのビュー/コレクション/モデルの外にあります。これがこれを行う適切な方法であるかどうかはわかりませんが、機能します。

惨めに失敗した最悪の部分は、私のコードがおそらく最初から間違っていたことに気づきました。合計を含むその div の下には、割引と呼ばれる別の入力があります。これが行うことになっているのは、割引率をカウント((value of discount/my total sum)*100)し、テーブル内のレートを更新して、古いものと割引が適用されたものの両方を表示することです。

ここでの実際の問題:

私が得られないのは、下の部分 (合計と割引 - スクリーンショットを参照) を上の部分とどのように接続する必要があるかということです。単純なdivですか？1 つのモデル (割引) がコレクション内のモデルにどのように影響し、その逆の場合、行を追加すると合計と割引率に影響を与える必要があるのでしょうか?

バックボーンをまだ使用していない、動作中の jquery のみのバージョンからどのように動作するかを示すスクリーンショットを次に示します。

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

要求があればコードも投稿しますが、jquery イベント、それらの合計とシズル ウィズルを含む私自身の単純なオブジェクトを使用して解決しようとする試みにより、現在は肥大化しています。

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 に答える