Knockout: Propriedade HTML5: valueAsNumber - isso é compatível?

Criado em 22 nov. 2017 · 3Comentários · Fonte: knockout/knockout

Acabei de descobrir que se eu tiver um elemento de entrada HTML5 com type definido como number e data-bind="textInput ..." , o valor de ligação resultante é uma string. Gostaria de evitar a conversão de cada string em um número, pois isso acionaria todas as assinaturas dependentes dos observáveis e levaria a chamadas recursivas. Como solução alternativa, segui estas instruções, use enable a propriedade valueAsNumber dentro da função ko.selectExtensions.readValue que é usada pela associação value .

Infelizmente, não sei como fazer o mesmo com a ligação textInput e, portanto, gostaria de saber se essa integração está planejada para o futuro.

Fonte

Apollo3zehn

Comentários muito úteis

Tenho certeza que uma boa parte do código abaixo veio do SO, aqui ou do grupo de notícias. Enfim, aqui está o que usamos em nosso projeto.
Provavelmente, poderia ser feito com algumas opções sobre como você gostaria de se comportar quando apresentado a uma entrada não numérica. Por exemplo, você mantém o valor antigo, força para indefinido, força para NaN, ignora ...?

//A binding handler that uses a textInput binding, only accepting numeric input for writing
ko.bindingHandlers.numericInput = {
    init: function (element, valueAccessor, allBindings, data, context) {
        var interceptor = ko.computed({
            read: function () {
                return ko.unwrap(valueAccessor());
            },
            write: function (value) {
                var writer = valueAccessor();  
                if (!ko.isObservable(writer)) {
                    console.warn('Non ob used with numeric input - cannot store', value); 
                    return;
                }
                if (value === ""){
                    valueAccessor()(0);
                } else if (!isNaN(value)) {
                    valueAccessor()(parseFloat(value));
                }
            },
            disposeWhenNodeIsRemoved: element
        });

        ko.applyBindingsToNode(element, { textInput: interceptor }, context);
    }
};

IanYates em 26 nov. 2017

👍2

Todos 3 comentários

//A binding handler that uses a textInput binding, only accepting numeric input for writing
ko.bindingHandlers.numericInput = {
    init: function (element, valueAccessor, allBindings, data, context) {
        var interceptor = ko.computed({
            read: function () {
                return ko.unwrap(valueAccessor());
            },
            write: function (value) {
                var writer = valueAccessor();  
                if (!ko.isObservable(writer)) {
                    console.warn('Non ob used with numeric input - cannot store', value); 
                    return;
                }
                if (value === ""){
                    valueAccessor()(0);
                } else if (!isNaN(value)) {
                    valueAccessor()(parseFloat(value));
                }
            },
            disposeWhenNodeIsRemoved: element
        });

        ko.applyBindingsToNode(element, { textInput: interceptor }, context);
    }
};

IanYates em 26 nov. 2017

👍2

Obrigado, vou tentar! Mesmo assim, eu preferiria suporte direto para campos numéricos HTML5.

Apollo3zehn em 1 dez. 2017

👍1

Não é tão trivial quanto você pode pensar. input[type=number] valueAsNumber está terrivelmente quebrado no MS Edge - sempre lança uma exceção. Você pode querer implementar uma solução para isso também.