javascript - 在焦点 knockout 自定义绑定(bind)上显示输入的基本值

Question

我已经在 knockout 中创建了以下绑定(bind)处理程序(请原谅困惑 - 目前只是将其组合在一起!)

所需的功能是，如果字段是数字，那么在显示时它将被格式化为“X”个小数位(默认 2)，但基础值是输入的值。

一切正常，但我想添加这样的功能:当输入聚焦时，它会显示实际值，但我只是不知道如何执行此操作。

即

1. 用户在输入中输入 1.1121
2. 当他们将输入保留为 1.11 时
3. 如果他们返回输入(焦点)，则会显示 1.1121 进行编辑

这是第 3 点，我不知道如何实现，因为目前它显示 1.11，然后在模糊时覆盖？

任何人都可以为我指出正确的方向 - 基本上我在哪里访问焦点的基础值并将显示的文本替换为基础值？

为了简洁起见，我删除了一些其他包装输入的“装饰”代码，因为它们不相关。

提前致谢。

    ko.bindingHandlers.specialInput = {
    init: function (element, valueAccessor, allBindingsAccessor) {

        var value = valueAccessor();

        var decimals = allBindingsAccessor().decimals || 2;
        var formatString = "";

        var interceptor = ko.computed({
            read: function () {
                if(isNumeric(ko.unwrap(value))){

                    //to do if time - replace this with a function that will accept any number of decimals
                    if(decimals == 0){
            formatString = "0,0";
        }
                    if(decimals == 1){
            formatString = "0,0.0";
        }
                    if(decimals == 2){
            formatString = "0,0.00";
        }
                    if(decimals == 3){
            formatString = "0,0.000";
        }
                    if(decimals == 4){
            formatString = "0,0.0000";
        }
                    if(decimals == 5){
            formatString = "0,0.00000";
        }


                return numeral(ko.unwrap(value)).format(formatString);
                }else{
                    return ko.unwrap(value);
                }
            },
            write: function (newValue) {
                if ($.trim(newValue) == '')
                    value("");
                else
                   if(isNumeric(newValue)){ 
                    value(numeral().unformat(newValue));
                value.valueHasMutated();
                   }else{
                    value(newValue);
                    value.valueHasMutated();
                   }
            }
        }).extend({notify: 'always'});




        if (element.tagName.toLowerCase() == 'input') {
            ko.applyBindingsToNode(element, {
                value: interceptor
            });
        } else {
            ko.applyBindingsToNode(element, {
                text: interceptor
            });
        }


    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var value = ko.unwrap(valueAccessor());

        return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

    }
};

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

Answer 1

我不会用计算的拦截器来实现这个。

我宁愿执行以下操作:

在init中注册focus和blur的事件处理程序:

• 在 focus 处理程序上，您必须显示输入中的基础值
• 在 blur 处理程序中，您必须将数字存储在文本框中，并在输入中显示舍入后的值

在更新中，您必须存储实际值，并将其显示在文本框中。当您更新值时，文本框很可能不会获得焦点，因此您应该安全地显示舍入值。不过，如果你认为在某些情况下它可以聚焦，你可以做这样的事情来测试它来决定如何显示值:Using jQuery to test if an input has focus

伪代码

ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  var $element = $(element);

  $element.on('focus', function() {
    // Show raw value:
    $element.val(/* raw value */);
  });

  $element.on('blur', function() {
    // Update the observable with the value in the input
    ko.unwrap(valueAccessor())( /* get raw value from input */);
    // Show the rounded value
    $element.val(/* rounded value */);
  });

  // Update will be called after init when the binding is first applied,
  // so you don't have to worry about what it's initially shown
},

update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // When the value changes, show it in the input
    $.element.val(/* if focused show raw, if not, show roundede*/);
}

};

如果您确定仅将其与输入和可写可观察量一起使用，则此代码是安全的。如果你对此有疑问，你应该添加许多检查，例如检查元素的类型以使用 jQuery .val() 或 .text()，检查绑定(bind)表达式是否is a writeable observable更新其值，等等。

注意:有一些事情需要多次监督:当元素被销毁时，我们不再需要的对象就会被丢弃(例如，使用“if”、“whit”或“template”时可能会发生这种情况)。在这种情况下，我认为您不需要这样做，但是请参阅:Custom disposal logic如果您认为需要销毁某些东西。