Polymer: 模型：由于用户输入，数字数据类型转换为字符串

创建于 2015-07-01 · 3评论 · 资料来源: Polymer/polymer

由于用户输入，定义为Number数据类型的属性将转换为String数据类型。我想知道这种症状不仅发生在iron-input或paper-input ，而且这是 Polymer 的行为。有没有简单的方法来停止数据类型转换？

请在以下iron-input输入任意数字。 “字符串”将始终弹出。

索引.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

属性上的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

@arthurevans 非常感谢您的详细解释！
也许将其添加到 Polymer 的常见问题解答中也会对其他用户有所帮助。

masaoliou 于 2015-07-02

👍1

如果使用 props 类型 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条评论

相关问题