0

我已经创建了（请原谅混乱 - 目前只是将它一起破解！）淘汰赛中的以下绑定处理程序

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

一切正常，但我想添加一个功能，当输入聚焦时，它会显示实际值，我只是不知道如何做到这一点。

IE

  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);
}
4

2 回答 2

1

在绑定处理程序中使用 jQuery 没有任何问题，但您也可以使用现有的绑定处理程序非常简单地做到这一点。这是一种可以滚动到组件中以重复使用的东西（尽管在我的示例中我没有这样做）。

您只需要一个值的后备存储，计算返回后备存储或格式化后备存储，具体取决于输入是否具有焦点（使用hasFocus绑定）。

vm = (function() {
  var editing = ko.observable(false),
    backingStore = 0,
    value = ko.computed({
      read: function() {
        return editing() ? backingStore : (+backingStore).toFixed(2);
      },
      write: function(newValue) {
        backingStore = newValue;
      }
    });

  return {
    editing: editing,
    value: value
  }

}());

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="hasFocus: editing, value: value" />
<input />

于 2015-12-18T12:46:04.747 回答
1

我不会用interceptor计算来实现这个。

我宁愿做以下事情：

在init和init 的init注册事件处理程序中：focusblur

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

您必须在其中update存储实际值，并将其显示在文本框中。当您更新值时，文本框很可能没有焦点，因此您应该安全地显示四舍五入的值。但是，如果你认为在某些情况下它可以被聚焦，你可以做这样的事情来测试它来决定如何显示值：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*/);
}

};

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

注意：有一些事情是被多次监督的：当元素被销毁时处理我们不再需要的对象（例如，'if'、'whit' 或 'template' 可能会发生这种情况）。在这种情况下，我认为您不需要这样做，但是，如果您认为需要销毁某些东西，请参阅：自定义处置逻辑。

于 2015-12-18T09:47:42.320 回答