Polymer: モデル：ユーザー入力により、数値データ型が文字列に変換されます

作成日 2015年07月01日 · 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">

文字列「123」を使用してvalueプロパティを構成しています。 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 2015年07月01日

👍3 ❤1

全てのコメント3件

これはPolymerの動作ではなく、標準のDOM動作です。 inputタグのvalueプロパティは文字列値です。

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

 <my-element value="123">

文字列「123」を使用してvalueプロパティを構成しています。 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 2015年07月01日

👍3 ❤1

@arthurevans詳細な説明ありがとうございます！
おそらくそれをPolymerのFAQに追加すると、他のユーザーにも役立つでしょう。

masaoliou 2015年07月02日

👍1

小道具を使用する場合は、arrayObjectと入力します。このようにして削除できます。
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html

tonsai-j 2016年09月30日

このページは役に立ちましたか？

0 / 5 - 0 評価

Polymer: モデル：ユーザー入力により、数値データ型が文字列に変換されます

最も参考になるコメント

全てのコメント3件

関連する問題