0

私の現在の作業例を見る: 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;
    });
4

1 に答える 1

2

あなたの問題は、フィールドが観察できないことでした.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>
于 2013-02-27T03:06:53.417 に答える