淘汰赛扩展问题-更好的解决方案？

Question

我是淘汰赛的新手，仍然在学习如何最好地使用它。 我在应用程序中有一些输入字段，这些字段与一堆实时更新的计算相关。 各个领域的工作很棒，一切都很好...

除了，我需要在用户输入时格式化输入，仅用于显示（原始数据必须保留用于计算，但3应该显示为3％或在另一个字段中3000000应该显示为3,000,000，等等）。 我有一些工作，但是我认为我的解决方案存在一个重大缺陷，因为结果始终是错误的，并且有可能完全破坏输入字段。

因此，输入字段之一的示例与另一个字段始终等于100％绑定：

<input id='sm' data-bind='textInput: s_smixe' readonly='true'>

势必会：

self.s_smixebase = ko.observable(30);
self.s_smixe = ko.pureComputed({
    read: function(){
        return this.s_smixebase();
    },
    write: function(value){
        if (parseFloat(value)<100) {
            var otherValue = 100 - parseFloat(value);
            this.s_smixebase(value);
            this.s_rmixebase(otherValue);
        } else {
            value = 100;
            this.s_smixebase(value);
            this.s_rmixebase(0);
        }
    },
    owner: this
}).extend({percent:{}});
self.s_smixeraw = self.s_smixe.raw;

然后将其扩展为：

ko.extenders.percent = function(target) {
    var raw = ko.observable();
    var result = ko.computed({
        read: function() {
            var value = target();
            if (value.toString().indexOf('%')===-1){
                raw(parseFloat(value));
                value = value + '%';
                return value;
            } else {
                value = value.replace('%','');
                raw(parseFloat(value));
                value = value + '%';
                return value;
            }       
        },
        write: target
    }).extend({notify:'always'});
    result.raw = raw;
    return result;    
};

因此，这里发生的是，用户输入的第一个字符正确格式化，用户输入的第二个字符消失了，第三个字符连接了第一个字符并正确格式化了。 如果该字段是计算字段或常规可观察字段，并且在未应用扩展名的情况下计算代码运行良好，则发生这种情况相同。 因此，要输入77％，您将必须输入7-X-7（其中X可以是任何值，因为X会丢失到某个地方的过程中）。

还应注意，我在此应用程序中使用了虚拟javascript数字键盘，因此我通过javascript添加值（尽管这并没有影响任何其他功能，所以我不确定为什么会在这里出现）。

谁能提供关于我做错了什么的建议？ 我错过了什么导致输入如此多的错误？ 我真的下定决心不放弃这种实时输入格式的概念，因为它可以使显示更加整洁，但是如果需要的话，我将仅对模糊进行格式化。

在此先感谢您的任何建议。

Answer 1

由于在格式化功能替换您在键入时键入的内容时，正确定位光标很困难，因此建议您使用一个具有两种模式的字段：一种是在其中键入内容，另一种是在其中显示格式化值。 哪个显示取决于光标焦点。

<div data-bind="with:pctInput">
<label>Value</label>
<input class="activeInput" data-bind='textInput: base, event:{blur:toggle}, visible:editing, hasFocus:editing' />
<input data-bind='textInput: formatted, event:{focus:toggle}, visible:!editing()' readonly='true' />
</div>

一个有效的示例在这里： http : //jsfiddle.net/q473mu4w/1/

Answer 2

因此，对于以后遇到此问题的任何人，我最终都使用了最初评论中提到的线程的@RoyJ解决方案的修改版本。 如果我要在较大的项目中使用它，我确实需要想出一种方法来进行缩放，但是对于少量输入的东西来说，这已经足够了。 同样，在我的情况下，有很多格式化的字段根据输入来计算其值，因此计算了multPercent和multNumber的值。 我想确保所有输入都正确地用于计算。 这是下面带有可用jsfiddle的代码示例：

<input data-bind="textInput:textPercent" />
<div data-bind="text:multPercent"></div>
<input data-bind="textInput:textNumber" />
<div data-bind="text:multNumber"></div>

以及随附的javascript：

function dataBindings() {
var self = this;

self.percent = function(str){
    var splice = str.toString().replace('%','');
    splice = splice + '%';
    return splice;
};

self.number = function(numStr){
    var formatted;
    if (Number(numStr) % 1) {
        var integer = numStr.toString().replace(/\.\d+/g,'');
        var decimal = numStr.toString().replace(/\d+\./g,'');
        integer = integer.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); //add comma formatting
        formatted = integer + '.' + decimal;
        console.log('formatted = '+formatted);
        return formatted;
    } else {
        formatted = numStr.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
        return formatted;
    }       
};

self.displayPercent = ko.observable('5%');
self.rawPercent = ko.observable(5);
self.formattedPercent = ko.computed({
    read: function() {
         return self.displayPercent();   
    },
    write: function(newValue) {
        if (newValue==='') {
            newValue = 0;
            self.rawPercent(0);
            var f = self.percent(newValue);
            self.displayPercent(f);
        } else {
            if (newValue.charAt(0)==='0') {
                newValue = newValue.slice(1);
            }
            self.rawPercent(parseFloat(newValue.toString().replace('%','')));
            var f = self.percent(newValue);
            self.displayPercent(f);
        }
    }
});

self.displayNumber = ko.observable('3,000');
self.rawNumber = ko.observable(3000);
self.formattedNumber = ko.computed({
    read: function(){
        return self.displayNumber();
    },
    write: function(newValue) {
        if (newValue==='') {
            newValue = 0;
            self.rawNumber(0);
            self.displayNumber('0');
        } else {
            if (newValue.charAt(0)==='0') {
               newValue = newValue.slice(1);
            }
            newValue = newValue.replace(/(,)+/g,'');
            self.rawNumber(parseFloat(newValue));
            var n = self.number(newValue);
            self.displayNumber(n);
        }
    }
});

self.multPercent = ko.computed(function(){
    return self.percent(self.rawPercent() * self.rawPercent());
});

self.multNumber = ko.computed(function(){
    return self.number(self.rawNumber() * self.rawNumber());
});    

return {
    textPercent: self.formattedPercent,
    multPercent: self.multPercent,
    textNumber: self.formattedNumber,
    multNumber: self.multNumber
};
}

ko.applyBindings(new dataBindings());

http://jsfiddle.net/jschevling/mwbzp55t/