Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It seems like what you're getting at is an issue with <em>modeling your data</em>. Sometimes it helps to take a step back and ask yourself "what are the things i'm working with?".</p> <p>It seems like each of the rows you mention represents an 'activity' (each with a name, and rate). You also have a collection of these activities, which is good. Now you could ask, "what kind of thing does this entire piece of ui (represented by the screenshot in it's entirety) represent?". If we called this piece of ui an ActivitiesView, it could listen for UI interaction (changing of the fields) which would update the collection. Once the collection changes, it triggers the view to re-render with the updated totals.</p> <p>In this example, the discount field on the collection is just a convenience and used by the collection to update it's children.</p> <pre><code>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 }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. COYeah, that's definitely the issue, the other is that I started playing around with Backbone like yesterday. Anyway, each row simply represent entry in database, its model stucture is simply {rate: 1200, hours: 10}, that selectbox updates rate(each activity have a different rate) for the entry. It's also got another select box with a person, but for the sake of simplicity a removed it. So model can have a collection as an attribute? Ok, so I'd have model project, with {dicount: 0, total:0, entries: new EntriesCollection}? then how would change on "discount" affect models in the collection?
      singulars
    2. COThe way i was thinking about it, the 'discount' field would only apply to 'project' models, and thus be calculated against the project total (not each individual item). The DB model for an activity could include a foreign key to it's associated 'project', if you wanted to relate them that way (a framework like Rails would make this easier).
      singulars
    3. COApparently I suck at explaining what I'm trying to do. Anyway, visible rate discount on each entry is a must, it's essential for the app to work. Also backend is fine. What I'm trying to do is pretty much all just for the visuals, so the user can see live how are those numbers changing as he adds new rows, changes activities, changes number in the hours input. So again, what needs to happen is totals(current rate * hours) are summed -> discount ratio is calculated(value of discount/sum of totals) -> loop thru entries and apply discount(boths old and new val is shown) -> new rate summed
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload