c# - knockout 购物车，统计商品的最终价格以及所有商品的小计

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>