用户输入他们习惯的 0-100 范围内的百分比值作为正常百分比。
但是当这些值用于计算时,它们需要在0-1
范围内,因此除以100,因此可以直接用于计算。
我使用Math.round(value * 100) / 10000
除以 100,所以数字将四舍五入为 2 位数。
一种解决方案使用数据绑定:
ko.bindingHandlers.percent = {
init: function (element, valueAccessor) {
$(element).change(function () {
DEBUG && log('Percent changed: ' + $(this).number() + ' saved as: ' + $(this).number() / 100);
valueAccessor()(Math.round($(this).number({ round: false }) * 100) / 10000);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
DEBUG && log('Percent changed: ' + value + ' displayed as: ' + value * 100);
$(element).val(Math.round(value * 10000) / 100);
}
};
但这会导致显示的值是用户输入值的 100 倍。
所以看起来除以 100 并没有发生。
bindinghandler
正在通过以下方式应用databind="percent
:Property".
另一种解决方案使用额外的扩展器:
obj.Property.extend({ AdvancedCalculation: null, Percent: null }); // Already tried flipping the order of these extenders.
ko.extenders.Percent = function (target) {
var result = ko.computed({
read: function () {
DEBUG && log('Value in model: ' + target());
return Math.round(target() * 10000) / 100; // Show
},
write: function (value) {
DEBUG && log('Save user input: ' + value);
return Math.round(value * 100) / 10000; // To database
}
});
return result;
}
ko.extenders.AdvancedCalculation = function (target) {
target.subscribe(function (value) {
DEBUG && log('Value in model ' + value);
// calculate some other stuff.
});
return target;
};
但是高级计算的东西并没有得到除以 100 的值。
此外,保存数据的控制器正在获取用户在浏览器中输入的值,而不是除以 100 的值。
此外,用户应该能够同时使用 , 和 . 表示点数
(例如:)5.4% or 5,4%
。
这将用于输入利率。
这两种解决方案从未同时应用,因此它们不会发生冲突。