Polymer: Model: tipe data angka diubah menjadi string karena input pengguna
Properti yang didefinisikan sebagai tipe data Number dikonversi ke tipe data String karena input pengguna. Saya ingin tahu gejala ini tidak hanya terjadi pada iron-input atau paper-input , tetapi ini adalah perilaku Polymer. Apakah ada cara sederhana untuk menghentikan konversi tipe data?
Silakan masukkan nomor apa saja di iron-input . "string" akan selalu muncul.
indeks.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
Semua 3 komentar
Ini bukan perilaku Polimer, ini perilaku DOM standar. Properti input tag value adalah nilai string:
https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
type: Number di properti tidak mempengaruhi ini; nilai itu hanya digunakan saat deserializingnilai atribut dari markup . Jadi, jika Anda memiliki markup seperti ini:
<my-element value="123">
Anda mengonfigurasi properti value dengan string "123". Jika value adalah type: Number ,
itu akan deserialized sebagai nomor 123.
Di sisi lain, ini:
<my-element value="{{hostValue}}">
Mengikat properti hostValue host ke properti my-element 's value . Tidak ada konversi tipe yang terlibat di sini; mereka memiliki nilai yang sama.
Jadi, Anda harus mengonversi nilai string input menjadi sesuatu yang lain. input Menyediakan properti valueAsNumber , yang dapat Anda ikat seperti ini:
<input is="iron-input" type="number" value-as-number="{{value::input}}">
Sebagai alternatif, Anda dapat memaksa nilai dalam metode valueChanged :
valueChanged:function(n) {
if(typeof n == "string") {
this.value = Number(n);
}
}
arthurevans
pada 1 Jul 2015
@arthurevans Terima kasih banyak atas penjelasan detailnya!
Mungkin menambahkannya ke FAQ Polimer akan membantu pengguna lain juga.
masaoliou
pada 2 Jul 2015
Jika Anda menggunakan props ketik arrayObject. Anda dapat menyelesaikan dengan seperti ini.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html
tonsai-j
pada 30 Sep 2016
Masalah terkait
microo8
·
4Komentar
myuseringithub
·
3Komentar
yuihiro
·
3Komentar
jimmc
·
3Komentar
limonte
·
3Komentar
Komentar yang paling membantu
Ini bukan perilaku Polimer, ini perilaku DOM standar. Properti
inputtagvalueadalah nilai string:type: Numberdi properti tidak mempengaruhi ini; nilai itu hanya digunakan saat deserializingnilai atribut dari markup . Jadi, jika Anda memiliki markup seperti ini:Anda mengonfigurasi properti
valuedengan string "123". Jikavalueadalahtype: Number,itu akan deserialized sebagai nomor 123.
Di sisi lain, ini:
Mengikat properti
hostValuehost ke propertimy-element'svalue. Tidak ada konversi tipe yang terlibat di sini; mereka memiliki nilai yang sama.Jadi, Anda harus mengonversi nilai string input menjadi sesuatu yang lain. input Menyediakan properti
valueAsNumber, yang dapat Anda ikat seperti ini:Sebagai alternatif, Anda dapat memaksa nilai dalam metode
valueChanged: