[英]Knockout shopping cart, counting final price of items and the subtotal for all items
Looking at my current working example: http://jsfiddle.net/6vBsm/1/ 看看我目前的工作示例: 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. 它也应该是动态的,以便对QTY,价格或折扣的任何更改都会重新计算最终价格。
fianlly, How to I point my subtotal to sum the new Final prices instead of base prices? fianlly,如何指出我的小计总和新的最终价格而不是基价?
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;
});
your problem was your fields weren't observable, I used the ko.mapping plugin to auto make things observable. 你的问题是你的字段不可观察,我使用ko.mapping插件来自动观察事物。
http://jsfiddle.net/keith_nicholas/dzZLW/ http://jsfiddle.net/keith_nicholas/dzZLW/
so your javascript is now :- 所以你的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);
};
}
and your html needs to be 你的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.