Polymer: Modelo: o tipo de dados numérico é convertido em string devido à entrada do usuário
Propriedades definidas como do tipo de dados Number são convertidas para o tipo de dados String devido à entrada do usuário. Eu me pergunto se esse sintoma não acontece apenas com iron-input ou paper-input , mas este é o comportamento do Polymer. Existe uma maneira simples de interromper a conversão de tipo de dados?
Insira qualquer número no seguinte iron-input . "string" sempre 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>
masaoliou
Todos 3 comentários
Este não é o comportamento do Polymer, é o comportamento padrão do DOM. A propriedade input tag value é um valor de string:
https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
O type: Number na propriedade não afeta isso; esse valor só é
<my-element value="123">
Você está configurando a propriedade value com a string "123". Se value for type: Number ,
ele será desserializado como o número 123.
Por outro lado, este:
<my-element value="{{hostValue}}">
Vincula a propriedade hostValue do host à propriedade my-element value . Nenhuma conversão de tipo está envolvida aqui; eles têm o mesmo valor.
Portanto, você precisará converter o valor da string de entrada em outra coisa. input Fornece uma propriedade valueAsNumber , que você pode vincular assim:
<input is="iron-input" type="number" value-as-number="{{value::input}}">
Como alternativa, você pode forçar o valor em seu método valueChanged :
valueChanged:function(n) {
if(typeof n == "string") {
this.value = Number(n);
}
}
arthurevans
em 1 jul. 2015
@arthurevans Muito obrigado pela explicação detalhada!
Talvez adicioná-lo ao FAQ do Polymer ajude outros usuários também.
masaoliou
em 2 jul. 2015
Se você usar adereços, digite arrayObject. você pode resove assim.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html
tonsai-j
em 30 set. 2016
Questões relacionadas
dandv
·
4Comentários
yordis
·
3Comentários
myuseringithub
·
3Comentários
mbana
·
3Comentários
augustoroman
·
4Comentários
Comentários muito úteis
Este não é o comportamento do Polymer, é o comportamento padrão do DOM. A propriedade
inputtagvalueé um valor de string:O
type: Numberna propriedade não afeta isso; esse valor só éVocê está configurando a propriedade
valuecom a string "123". Sevaluefortype: Number,ele será desserializado como o número 123.
Por outro lado, este:
Vincula a propriedade
hostValuedo host à propriedademy-elementvalue. Nenhuma conversão de tipo está envolvida aqui; eles têm o mesmo valor.Portanto, você precisará converter o valor da string de entrada em outra coisa. input Fornece uma propriedade
valueAsNumber, que você pode vincular assim:Como alternativa, você pode forçar o valor em seu método
valueChanged: