无法访问函数内的聚合物属性

Can't access Polymer properties inside functions

本文关键字:聚合物 属性 函数 访问      更新时间:2023-09-26

我试图在聚合物中的函数中访问属性(特别是标识符),但我一直将属性设置为未定义。这就是我的代码现在的样子。这是一个错误还是我做错了什么?

    <link rel="import" href="/ensurance/polymer/bower_components/polymer/polymer.html">
<link rel="import" href="/ensurance/polymer/bower_components/paper-styles/typography.html">
<!-- Iron elements -->
<link rel="import" href="/ensurance/polymer/bower_components/paper-date-picker/paper-date-picker.html">
<link rel="import" href="/ensurance/polymer/bower_components/paper-dialog/paper-dialog.html">
<script src="/ensurance/polymer/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/ensurance/polymer/bower_components/moment/moment.js"></script>
<link rel="stylesheet" href="/ensurance/polymer/components/styles/main.css">
<link rel="import" href="/ensurance/polymer/components/styles/shared-styles.html">
<style is="custom-style" include="shared-styles"></style>
<dom-module id="select-fecha">
    <template>
        <style>
        .smallInput {
            width: 20%;
        }
        </style>
        <div class="smallInput">
            <paper-input label="{{label}}" id="{{generarId('txt')}}" on-tap="abrirFecha" readOnly "true">
                <iron-icon icon="date-range"></iron-icon>
            </paper-input>
            <paper-dialog id="{{generarId('dialog')}}" class="paper-date-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
                <paper-date-picker id="{{generarId('picker')}}"></paper-date-picker>
                <div class="buttons">
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button dialog-confirm on-tap="seleccionarFecha">OK</paper-button>
                </div>
            </paper-dialog>
        </div>
    </template>
    <script>
    (function() {
        'use strict';
        Polymer({
            is: 'select-fecha',
            properties: {
                fecha: {
                    type: String,
                    value: ""
                },
                label: {
                    type: String,
                    value: "Fecha"
                },
                identificador: {
                    type: String,
                    value: "",
                    readOnly: true,
                    notify:true
                },
                fechaDate: {
                    type: Date,
                    value: new Date()
                }
            },
            ready: function() {
            },
            abrirFecha: function() {
                var dialogFecha = document.querySelector("#" + this.identificador + "_dialog");
                dialogFecha.open();
            },
            seleccionarFecha: function() {
                var pickerFecha = document.querySelector("#" + this.identificador + "_picker");
                var fecha = pickerFecha.date;
                var txtFecha = document.querySelector("#" + this.identificador + "_txt");
                txtFecha.value = fecha;
            },
            generarId: function(elemento) {
                var retorno = this.identificador + "_" + elemento;
                return retorno;
            }
        });
    })();
    </script>
</dom-module>

我这样称呼我的元素

<select-fecha label="Vigencia Desde" identificador="vigenciaDesde" ></select-fecha>

我觉得奇怪的是属性/属性标签确实有效。

提前谢谢你。

问题是您将"identificador"属性标记为"只读"。因此,您不能以声明方式设置它,而只能在 JS 中使用 :

myElement._setIdentificador("vigenciaDesde");

如果此属性是组件 API 的一部分,则应删除"只读"标志。