计算依赖输入值
Calculating dependent input values
我的目标是计算基价和售价之间的百分比利润率。但我也希望能够在保证金发生变化时重新计算价格。我不能只通过 property()
观察变化,因为价格和保证金会无限地相互重新计算。相反,我想对 keyup
和 change
事件运行计算,这正是我在 JQuery 中实现相同任务的方式。
但是 Ember 似乎不支持 input
助手的此类事件。只有 keypress
支持,我无法使用 keypress
实现所需的行为。
模板:
{{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"}}
控制器:
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);
}
}
});
扩展文本字段组件以支持 key-up
相当容易
App.KeyUpInputComponent = Em.TextField.extend({
keyUp: function(event){
// I chose to send these things, you could just send nothing
this.sendAction('key-up', event, this.get('value'));
}
});
{{key-up-input value=asdf key-up='keyUpAction'}}
http://emberjs.jsbin.com/didisuneka/1/edit?html,js,output
你的jsbin
http://jsbin.com/xedaxageze/1/edit
errrr,我意识到我之前已经回答过这个问题,这就是生活... KeyPress event not working as expected in Ember
我的目标是计算基价和售价之间的百分比利润率。但我也希望能够在保证金发生变化时重新计算价格。我不能只通过 property()
观察变化,因为价格和保证金会无限地相互重新计算。相反,我想对 keyup
和 change
事件运行计算,这正是我在 JQuery 中实现相同任务的方式。
但是 Ember 似乎不支持 input
助手的此类事件。只有 keypress
支持,我无法使用 keypress
实现所需的行为。
模板:
{{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"}}
控制器:
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);
}
}
});
扩展文本字段组件以支持 key-up
App.KeyUpInputComponent = Em.TextField.extend({
keyUp: function(event){
// I chose to send these things, you could just send nothing
this.sendAction('key-up', event, this.get('value'));
}
});
{{key-up-input value=asdf key-up='keyUpAction'}}
http://emberjs.jsbin.com/didisuneka/1/edit?html,js,output
你的jsbin
http://jsbin.com/xedaxageze/1/edit
errrr,我意识到我之前已经回答过这个问题,这就是生活... KeyPress event not working as expected in Ember