Polymer: النموذج: يتم تحويل نوع بيانات الرقم إلى سلسلة نتيجة لإدخال المستخدم

تم إنشاؤها على ١ يوليو ٢٠١٥  ·  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
مصدر
picture masaoliou

التعليق الأكثر فائدة

هذا ليس سلوك بوليمر ، إنه سلوك DOM القياسي. خاصية input tag's value هي قيمة سلسلة:

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

لا تؤثر type: Number على هذا العقار ؛ يتم استخدام هذه القيمة 

 <my-element value="123">

أنت تقوم بتكوين الخاصية value بالسلسلة "123". إذا كان value هو type: Number ،
سيتم إلغاء تسلسلها كرقم 123.

من ناحية أخرى ، هذا:

<my-element value="{{hostValue}}">

ربط خاصية المضيفين hostValue بخاصية my-element 's 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);
        }
    }
picture arthurevans في ١ يوليو ٢٠١٥
👍3 ❤1

ال 3 كومينتر

هذا ليس سلوك بوليمر ، إنه سلوك DOM القياسي. خاصية input tag's value هي قيمة سلسلة:

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

لا تؤثر type: Number على هذا العقار ؛ يتم استخدام هذه القيمة 

 <my-element value="123">

أنت تقوم بتكوين الخاصية value بالسلسلة "123". إذا كان value هو type: Number ،
سيتم إلغاء تسلسلها كرقم 123.

من ناحية أخرى ، هذا:

<my-element value="{{hostValue}}">

ربط خاصية المضيفين hostValue بخاصية my-element 's 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 picture arthurevans في ١ يوليو ٢٠١٥
👍3 ❤1

arthurevans شكرًا جزيلاً لك على الشرح التفصيلي!
ربما ستساعد إضافته إلى الأسئلة الشائعة الخاصة بـ Polymer المستخدمين الآخرين أيضًا.

masaoliou picture masaoliou في ٢ يوليو ٢٠١٥
👍1

إذا كنت تستخدم الخاصيات اكتب arrayObject. يمكنك إعادة بواسطة مثل هذا.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html

tonsai-j picture tonsai-j في ٣٠ سبتمبر ٢٠١٦
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

myuseringithub picture myuseringithub  ·  3تعليقات
dandv picture dandv  ·  4تعليقات
ghost picture ghost  ·  4تعليقات
yuihiro picture yuihiro  ·  3تعليقات
mbana picture mbana  ·  3تعليقات