淘汰購物車，計算物品的最終價格和所有物品的小計

Question

看看我目前的工作示例： http ： //jsfiddle.net/6vBsm/1/

如何計算每一行的最終價格？

計算應該是數量*價格 - 折扣％

它也應該是動態的，以便對QTY，價格或折扣的任何更改都會重新計算最終價格。

fianlly，如何指出我的小計總和新的最終價格而不是基價？

計算小計的當前代碼：

 // 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

你的問題是你的字段不可觀察，我使用ko.mapping插件來自動觀察事物。

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

所以你的javascript現在是： -

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);
        };

    }

你的HTML需要

<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>