vendredi 2 janvier 2015

Calculating dependent input values

My goal is to calculate margin in percent between base price and selling price. But I also want to be able to recalculate price when margin changes. I can't just observe changes via property(), because price and margin will recalculate each other infinitely. Instead, I want to run calculations on keyup and change events, exactly how I implemented same task in JQuery. But Ember seems doesn't support such events for input helper. Only keypress supportet, and I can't implement desired behaviour with keypress.


Template:



{{input value=basePrice placeholder='Base Price' action="updateMarginPercent" on="key-press"}}
{{input value=price placeholder='Price' action="updateMarginPercent" on="key-press"}}
{{input value=marginPercent placeholder='Margin Percent' action="updatePrice" on="key-press"}}


Controller:



App.ApplicationController = Ember.Controller.extend({
basePrice: 100,
price: 100,
marginPercent: 0,
actions: {
updateMarginPercent: function() {
debugger;
this.set('marginPercent', (this.get('price') - this.get('basePrice')) * 100.0 / this.get('basePrice'));
},
updatePrice: function() {
this.set('price', this.get('basePrice') * (this.get('marginPercent') + 100) / 100);
}
}
});


JSBin: http://ift.tt/1K8DQmj





Aucun commentaire:

Enregistrer un commentaire