如何显示与用于计算的值不同的值

时间:2013-07-10 10:07:37

标签: javascript knockout.js

用户输入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="percentProperty".

应用

另一种解决方案使用额外的扩展器:

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%)。

这将用于输入有趣的费率。

这两种解决方案从未同时应用,因此它们不会发生碰撞。

1 个答案:

答案 0 :(得分:1)

基本上,您尝试为一个属性设置两个不同的值。而且你似乎没有明确的语义方法来区分你实际期望得到的那个。

尝试做一些简单的事情,这样就可以了。

  • 有一个百分比的属性,这是持久的
  • 以单位值设置第二个属性(只读)。

在某些地方调用这些属性RatePercentRateUnitary。您可能还会发现有一个RateMultiplier或者某些东西很有用,是1.00 + RateUnitary。