淘汰购物车，计算物品的最终价格和所有物品的小计

Question

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

如何计算每行的最终价格？

计算应该是数量 * 价格 - 折扣百分比

它还应该是动态的，以便对数量、价格或折扣的任何更改都会重新计算最终价格。

最后，我如何将小计指向新的最终价格而不是基准价格？

计算小计的当前代码：

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