Polymer: 모델: 사용자 입력으로 인해 숫자 데이터 유형이 문자열로 변환됩니다.

에 만든 2015년 07월 01일 · 3코멘트 · 출처: Polymer/polymer

Number 데이터 유형으로 정의된 속성은 사용자 입력으로 인해 String 데이터 유형으로 변환됩니다. 이 증상이 iron-input 나 paper-input 에만 발생하는 것이 아니라 폴리머의 동작인지 궁금합니다. 데이터 유형 변환을 중지하는 간단한 방법이 있습니까?

다음 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

가장 유용한 댓글

이것은 폴리머의 동작이 아니라 표준 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 속성에 바인딩합니다. 여기에는 유형 변환이 포함되지 않습니다. 그들은 같은 가치를 가지고 있습니다.

따라서 입력의 문자열 값을 다른 것으로 변환해야 합니다. 다음과 같이 바인딩할 수 있는 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 댓글

이것은 폴리머의 동작이 아니라 표준 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}}">

호스트의 hostValue 속성을 my-element 의 value 속성에 바인딩합니다. 여기에는 유형 변환이 포함되지 않습니다. 그들은 같은 가치를 가지고 있습니다.

따라서 입력의 문자열 값을 다른 것으로 변환해야 합니다. 다음과 같이 바인딩할 수 있는 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

@arthurvans 자세한 설명 정말 감사합니다!
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 댓글

관련 문제