J'essaie de lier une grille avec 3 champs dans chaque ligne en utilisant Knockout.js : prix net (zone de texte), montant de la taxe (étiquette), prix total (zone de texte) .
Tous les champs sont autocalculés dès que le prix net ou total change. Le calcul est simple : net price = total price - tax amount; total price = net price + tax amount; tax amount = taxrate (const) * net price
Ces liaisons pour une seule entité sont démontrées dans ce violon : http://jsfiddle.net/ruslans/yEDRT/
Mais comment le faire pour une liste entière dans une observable array Je n'en ai aucune idée.
TaxRate est constant pour chaque ligne mais peut être différent (il provient des données sources).
De plus, tous les champs numériques doivent être formatés avec deux décimales, d'où la fonction. Voici ce que j'ai obtenu jusqu'à présent :
<table>
<thead>
<tr>
<th> </th>
<th>Net Price</th>
<th>Tax Band</th>
<th>Tax Amount</th>
<th>Total Price</th>
</tr>
</thead>
<tbody data-bind="foreach: OptionsModel.AvailableDealerFitOptions">
<tr>
<td>
<label class="checkbox">
<input type="checkbox" class="optionCheck" /> <span data-bind="text: Description"></span>
</label>
<input type="hidden" class="optionTaxRate" data-bind="value: TaxRate" />
</td>
<td>
<input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.formatNumber(NetPrice)" />
</td>
<td> <span data-bind="text: TaxBandDisplayName"></span>
</td>
<td> <span class="uneditable-input" data-bind="text: $root.formatNumber(TaxAmount)"></span>
</td>
<td>
<input type="number" min="0" max="99999999.99" step="0.01" data-bind="value: $root.getTotalDealerFitOptionPrice($data)" />
</td>
</tr>
</tbody>
</table>http://jsfiddle.net/ruslans/k7tK3/2/
Avez-vous déjà fait quelque chose de semblable ? Si c'est le cas, pourriez-vous me donner des indications sur la manière de le réaliser, s'il vous plaît ?
