Computing Sum on a HTML table column using Knockout and MVC.

[nare...@gmail.com]

I just started with Knockout in my MVC project. I have a HTML Table with row having textboxes and a field outside the table, which is computed based on textbox values. When the user updates the values in the textboxes, the computed values should also be updated .Here I have issues with computed data not being updated after the table rows are updated, though it computes data the first time correctly. Here is the code in my view, the data is Model.categoryAllocations from server controller, loaded initial page load.

<script type="text/javascript">
    var initialData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.categoryAllocations));
    var categoryAllocation = function(item)
    {
        var self = this;
        self.des_AllocationCategoryText = ko.observable(item.des_AllocationCategoryText);
        self.des_AllocationAmount = ko.observable(item.des_AllocationAmount);
    };
    var viewModel = function(){
        var self = this;
        debugger
        self.categoryAllocations = ko.observableArray($.each(initialData,function (i, item) {
            debugger
            new categoryAllocation(item);
            }));
        self.sum = ko.computed(function(){
            var total = 0;
            debugger
            $.each(self.categoryAllocations(), function(i, item) { 
                debugger; 
                total += item.des_AllocationAmount; 
            })
            return total;
        })
    };

    $(document).ready(function () 
    { 
        ko.applyBindings(new viewModel());
    });

    function formatCurrency(value) {
        return "$" + value.toFixed(2);
    }

</script>

<table>
    <thead class="k-grid-header">
        <tr class="">
            @*<th></th>*@
            <th>Category</th>
            <th>Amount</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: categoryAllocations'>
        <tr>
            <td><span data-bind='text: des_AllocationCategoryText' />
            </td>
            <td>
                <input data-bind='value: des_AllocationAmount, valueUpdate: "afterkeydown" '/>
            </td>
        </tr>
    </tbody>
</table>

<p class='grandTotal'>
    Total value: <span data-bind='text: formatCurrency(sum())'></span>
</p>

Can someone help me in point out the bug in my code

Thanks in Advance,

Naren

[Naren]

Thanks Evan,

Apart from your point..there was another correction to be made to pass my data as array to ko.observableArray function, i was passing them as objects, so it was not observing the changes..

It works now after passing the objects as array.

On Mon, Dec 2, 2013 at 12:37 PM, Evan Worley <evanw...@gmail.com> wrote:

For starters, des_AllocationAmount is an observable, so in your sum function update the line to be

total += item.des_AllocationAmount();

--
Thanks,
Naren