Geek asks and answers

KnockoutJS - Calculating Rows and Columns

This question follows from my initial and first questions: Nested data, loading children .

I have a table that is populated with data from JSON that contains nested objects (see color coding). The table contains one row per object that can be edited. This is called the "Highlight" line.

These values ​​are populated from the JSON object ("Values": {"n": 4, "n2": 2, etc.).

Firstly, I would like to show the total for each row being edited. Since the values ​​are updated inside the row, general updates. In this case, I would like to compare the original total (Allocation.Total) with the observed total, so I can change the css class on the control cell to indicate whether the data has changed.

This is shown below; (yellow marked user changes)

http://i.stack.imgur.com/XQpLp.jpg

The second part of the question is about the total amount of the column. The above question was that my head was a little hurt, but this blow is in my head. So I will sleep on this and then update the question as soon as it becomes a little clearer.

There is one complication arising from the use of a simplified data model. In this case, saying that everything is the same type of object (crew), the word used for distribution should change when the node has children. If the node has “Child Distribution,” you should call the “Guide.”

Simplified code example here ...

Updated using the column part ... Allocated.Total is the total number of Allocations. The difference here is that this amount works on the columns of the table, not one row. Is it possible? My mind began to melt a little.

Update - April 26th

, hardcoding node1, node2, node3. , , / (, node1, node2, node3). HTML, , .

JavaScript, , API, , JavaScript . , (, ), node1, node2, node3 . .

, . Grand Total , , ( - , - , - ). node, .

Redeemed. , , node. -, XPaths, -: Crew.

+1
1

OK. , .

self.totalAllocation = ko.computed(function() {
            var values = self.Allocation.Values;
            return Number(values.node1()) + 
                   Number(values.node2()) + 
                   Number(values.node3());
})

. , . json. / / , , . totalAllocation json, , .

, . .

. .

self.allocLabel = ko.computed(function() {
    return self.HasChildren() ? "Guide" : "Allocation";            
});

<th data-bind="text: allocLabel">Allocation</th>

. , , Allocated.Total . Redeemed? ? , , .

- .

self.grandTotal = ko.computed(function() {
    var result = 0;              
    for (var i = 0; i < self.Crews().length; i += 1) {
        result += self.Crews()[i].totalAllocation();
    }   
    return result;
});

, Crews totalAllocation . , .

http://jsfiddle.net/madcapnmckay/CGBZe/

. ().

self.totalAllocation = ko.computed(function() {
     var values = self.Allocation.Values;
     var total = 0;
     for (var prop in values) { 
         total += Number(ko.utils.unwrapObservable(values[prop]));
     }
     return total;
})

, .

+1

More articles:


All Articles