Knockout shopping cart, counting final price of items and the subtotal for all items

Question

Looking at my current working example: http://jsfiddle.net/6vBsm/1/

How can I calculate the final price for each row?

The calculation should be Quantity * Price - discount %

It should also be dynamic so that any change to QTY, Price or discount recalculates the final price.

fianlly, How to I point my subtotal to sum the new Final prices instead of base prices?

Current code for computing subtotal:

 // Computed data
    self.totalSurcharge = ko.computed(function () {
        var total = 0;
        for (var i = 0; i < self.SelectedComponents().length; i++)
        total += self.SelectedComponents()[i].Price;
        return total;
    });

Answer 1

your problem was your fields weren't observable, I used the ko.mapping plugin to auto make things observable.

http://jsfiddle.net/keith_nicholas/dzZLW/

so your javascript is now :-

function ViewModel() {
        var self = this;

        self.Components = [{
            "ID": "1",
                "Name": "Tennis Ball",
                "Description": "Basic Yellow Tennis Ball 9",
                "Quantity": 0,
                "Price": 1.99,
                "Discount": 0.0
        }, {
            "ID": "2",
                "Name": "Hockey Stick",
                "Description": " Premium Carbon Fiber Construction",
                "Quantity": 0,
                "Price": 67.99,
                "Discount": 0.0
        }, {
            "ID": "3",
                "Name": "Cycling Helmet",
                "Description": " For going fast.",
                "Quantity": 0,
                "Price": 226.99,
                "Discount": 0.0

        }];

        self.componentToAdd = ko.observable();
        self.SelectedComponents = ko.observableArray([]);


        // Computed data
        self.totalSurcharge = ko.computed(function () {
            var total = 0;
            for (var i = 0; i < self.SelectedComponents().length; i++)
            {                        
              total += self.SelectedComponents()[i].Price() * self.SelectedComponents()[i].Quantity() *  (100-self.SelectedComponents()[i].Discount())/100;
            }
            return total;
        });


        //Operations
        self.addComponent = function () {        

            var mycopy = {};
            ko.mapping.fromJS(self.componentToAdd(), {}, mycopy);
            self.SelectedComponents.push(mycopy);
        };

    }

and your html needs to be

<div data-bind="visible: SelectedComponents().length > 0">
    <table class="koSubTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Discount %</th>

                <th>Final Price</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: SelectedComponents">
            <tr>
                <td data-bind="text: Name" style="width:90px;"></td>
                <td data-bind="text: Description" style="width:300px;"></td>
                <td style="width:90px;">
                    <input data-bind="value: Quantity" size="5" />
                </td>
                <td style="width:90px;">
                    <input data-bind="value: Price().toFixed(2)" size="8" />
                </td>
                <td style="width:90px;">
                    <input data-bind="value: Discount" size="5" />
                </td>

                <td style="width:120px;">???</td>
            </tr>
        </tbody>
    </table>
    <div>
        <br>Subtotal $<span data-bind="text: totalSurcharge().toFixed(2)"></span>

    </div>
</div>
<br>
<!--Bind Json List to this drop down-->
<select id="myComponent" data-bind="options: Components, optionsText: 'Name', value:  componentToAdd"></select>
<!--Click on this button-->
<button data-bind="click: addComponent">Add to list</button>