javascript - 无法访问函数内的 Polymer 属性

Question

我试图访问 Polymer 中函数中的属性(特别是标识符)，但我一直得到未定义的属性。这就是我的代码现在的样子。这是一个错误还是我做错了什么？

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

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

提前谢谢您。

Answer 1

问题是您将“identificador”属性标记为“readOnly”。因此你不能以声明方式设置它，只能在 JS 中使用:

myElement._setIdentificador("vigenciaDesde");

如果此属性是组件 API 的一部分，那么您应该删除“readOnly”标志。