Polymer: Модель: числовой тип данных преобразуется в строку из-за ввода данных пользователем

Созданный на 1 июл. 2015 · 3Комментарии · Источник: Polymer/polymer

Свойства, определенные как тип данных Number , преобразуются в тип данных String из-за ввода данных пользователем. Интересно, что этот симптом случается не только с iron-input или paper-input , но это поведение Polymer. Есть ли простой способ остановить преобразование типа данных?

Пожалуйста, введите любое число в следующие iron-input . "строка" всегда будет всплывать.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

proto.html:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="proto-element">
    <template>
        <input is="iron-input" bind-value="{{value}}">
    </template>
</dom-module>
<script>
    Polymer({
        is: "proto-element",
        properties:{
            value:{
                type:Number,
                value:1,
                observer:"valueChanged"
            }
        },
        valueChanged:function(n,o){
            if(typeof o != "undefined")
                alert(typeof n);
        }
    });
</script>

question

Источник

masaoliou

Самый полезный комментарий

Это не поведение Polymer, это стандартное поведение DOM. Свойство input тега value является строковым значением:

https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

type: Number на свойстве не влияет на это; это значение используется только при десериализациизначение атрибута из разметки . Итак, если у вас есть такая разметка:

 <my-element value="123">

Вы настраиваете свойство value со строкой «123». Если value равно type: Number ,
он будет десериализован как число 123.

С другой стороны, это:

<my-element value="{{hostValue}}">

Привязывает свойство hostValue хостов к свойству my-element value . Здесь не используется преобразование типов; они имеют одинаковую ценность.

Итак, вам нужно преобразовать строковое значение ввода во что-то еще. input Предоставляет свойство valueAsNumber , которое можно привязать следующим образом:

    <input is="iron-input"  type="number" value-as-number="{{value::input}}">

В качестве альтернативы вы можете принудить значение в своем методе valueChanged :

    valueChanged:function(n) {
        if(typeof n == "string") {
          this.value = Number(n);
        }
    }

arthurevans 1 июл. 2015

👍3 ❤1

Все 3 Комментарий

Это не поведение Polymer, это стандартное поведение DOM. Свойство input тега value является строковым значением:

https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

 <my-element value="123">

Вы настраиваете свойство value со строкой «123». Если value равно type: Number ,
он будет десериализован как число 123.

С другой стороны, это:

<my-element value="{{hostValue}}">

    <input is="iron-input"  type="number" value-as-number="{{value::input}}">

В качестве альтернативы вы можете принудить значение в своем методе valueChanged :

    valueChanged:function(n) {
        if(typeof n == "string") {
          this.value = Number(n);
        }
    }

arthurevans 1 июл. 2015

👍3 ❤1

@arthurevans Большое спасибо за подробное объяснение!
Возможно, добавление его в FAQ по Polymer поможет и другим пользователям.

masaoliou 2 июл. 2015

👍1

Если вы используете реквизит типа arrayObject. вы можете реанимировать таким образом.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html