Почему мой обозреватель собственности вызывается дважды с одним и тем же newValue? - PullRequest
Новая
       13

Почему мой обозреватель собственности вызывается дважды с одним и тем же newValue?

0 голосов
/ 08 апреля 2019

Я делаю наблюдателя, который добавляет разделитель тысяч, будь то '.'или ',', на любое число, которое пользователь вводит.

Для тех, кто не знает, в Polymer можно привязать наблюдателя к свойству, которое в основном является функцией, вызываемой каждый раз, когда это свойство изменяется.

Наблюдатель вызывается с двумя параметрами, довольно понятными именами параметров 'newValue' и 'oldValue'.

Сейчас он правильно добавляет разделители, но когда я нажимаю удалить, он неудалить то, что он должен удалить.

Это мой вариант использования:

1) Я набираю '123456'.

2) Код меняет его на '123.456'.

3) Я нажимаю «Удалить» с курсором в последней позиции «123.456 |».

4) Наблюдатель вызывается три раза.

  • Первый с «newValue»= 123,45.Свойство и отображаемое число обновляются до «12 .345».

  • При изменении свойства наблюдатель вызывается второй раз с «newValue» = «12 .345».Свойство и отображаемое число обновляются до одного и того же значения (я не знаю почему, оно само по себе не было изменено .... но давайте продолжим).

  • Этовремя наблюдателя называется ОПЯТЬ, что странно, поскольку оно имеет то же значение, что и раньше.Значение newValue равно 123.456 (что-то, чего я не понимаю), а отображаемое свойство и число возвращаются в исходное состояние (см. Шаг 2).

Я впервые запустилиспользуя наблюдатель свойства, но когда я решил эту проблему, я переключился на использование прослушивателя на входе, поскольку он позволяет мне проверять свойство inputType и действовать соответственно.

Когда действие удаляется, inputType имеет значение «contentDeleteBackward», а когда он вставляется, inputType имеет значение «insertText».

Это функция наблюдателя 

_turnoverObserver: function (newValue, oldValue) {
      let parsedWithoutCommas = String(parseInt(newValue.replace(/\D/g, ''), 10));
      if (parsedWithoutCommas !== oldValue) {
        this.fire('turnover-event', {turnover: parsedWithoutCommas});
        let result = [];
        let reversed = parsedWithoutCommas.split("").reverse();
        if (reversed.length > 3) {
          reversed.forEach((digit, index) => {
            if (index !== 0 && index % 3 === 0) {
              result.push('.');
            }
            result.push(digit);
          });
          this.turnover = result.reverse().join("");
        }
      }
    },

Этоявляется функцией прослушивания на входе 

 _addSeparatorTurnover (e) {
      let value = e.target.value;

      let parsedWithoutCommas = String(parseInt(value.replace(/\D/g, ''), 10));

      if (e.inputType === 'insertText') {
        let result = [];

        if (parsedWithoutCommas.length > 3) {
          let reversed = parsedWithoutCommas.split('').reverse();
          reversed.forEach((num, index) => {
            if (index !== 0 && index % 3 === 0) {
              result.push('.');
            }
            result.push(num);
          });
          e.target.value = result.reverse().join('');
        }
      } else {
        let result = [];

        let {selectionStart, selectionEnd} = e.target.$.input;
        let deletedVal = parsedWithoutCommas.slice(0, selectionStart - 2) + parsedWithoutCommas.slice(selectionStart - 1);

        deletedVal.split('').reverse().forEach((num, index) => {
          if (index !== 0 && index % 3 === 0) {
            result.push('.');
          }
          result.push(num);
        });

        e.target.value = result.reverse().join('');
      }
    },

При наборе '123456' должно отобразиться '123.456'

При удалении последней цифры из '123.456' следует изменить ее на '12 .345 '

1 Ответ

0 голосов
/ 10 апреля 2019

Я попытался использовать ваш код и увидел, что наблюдатель над свойством звонит ровно дважды, а не трижды, как вы упомянули. Однако я прокомментировал нижеприведенную строку из вашего кода. 

`this.fire('turnover-event', {turnover: parsedWithoutCommas});`

Существует вероятность того, что вы можете пытаться изменить одно и то же значение даже в указанном выше событии и, вероятно, вызвать третий вызов. Кроме того, ваш код, кажется, работает правильно при вставке чисел. Если мы начнем удалять номера, он перестанет работать, как ожидается, ниже 4 цифр. т.е. Для 4 цифр он показывает 1,234, а если вы удалите еще одну, он показывает 1,23, что не соответствует вашим ожиданиям (при условии). Я подправил ваш код и ниже работает отлично. 

_turnoverObserver: function(newValue, oldValue) {
                if (newValue) {
                    let parsedWithoutCommas = String(parseInt(newValue.replace(/\D/g, ''), 10));
                    if (parsedWithoutCommas !== oldValue) {
                        //this.fire('turnover-event', { turnover: parsedWithoutCommas });
                        let result = [];
                        let reversed = parsedWithoutCommas.split("").reverse();
                        if (reversed.length >= 3) {
                            reversed.forEach((digit, index) => {
                                if (index !== 0 && index % 3 === 0) {
                                    result.push('.');
                                }
                                result.push(digit);
                            });
                            this.somevalue = result.reverse().join("");
                        }
                    }
                }
            }
...