Polymer: Modelo: el tipo de datos numérico se convierte en una cadena debido a la entrada del usuario

Creado en 1 jul. 2015 · 3Comentarios · Fuente: Polymer/polymer

Las propiedades definidas como del tipo de datos Number se convierten al tipo de datos String debido a la entrada del usuario. Me pregunto si este síntoma no le ocurre solo a iron-input o paper-input , sino que este es el comportamiento de Polymer. ¿Existe una forma sencilla de detener la conversión del tipo de datos?

Ingrese cualquier número entre los siguientes iron-input . "cadena" siempre aparecerá.

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

Fuente

masaoliou

Comentario más útil

Este no es el comportamiento de Polymer, es el comportamiento estándar de DOM. La propiedad input etiqueta value es un valor de cadena:

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

Los type: Number en la propiedad no afectan esto; ese valor solo se usa al deserializarun valor de atributo del marcado . Entonces, si tiene un marcado como este:

 <my-element value="123">

Estás configurando la propiedad value con la cadena "123". Si value es type: Number ,
se deserializará como el número 123.

Por otro lado, esto:

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

Vincula la propiedad hostValue los hosts a la propiedad my-element de value . Aquí no se involucra ninguna conversión de tipo; tienen el mismo valor.

Por lo tanto, deberá convertir el valor de la cadena de entrada a otra cosa. input Proporciona una propiedad valueAsNumber , que podría enlazar así:

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

Alternativamente, puede forzar el valor en su método valueChanged :

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

arthurevans en 1 jul. 2015

👍3 ❤1

Todos 3 comentarios