Polymer 1.0 Iron-form отказывается отображать детали данных

Question

В течение нескольких дней я искал, почему моя железная форма с моим полимерным элементом отказывается работать правильно. Когда я хочу увидеть то, что выглядит как мое значение, из моего paper-textarea, когда я отправляю, я не могу, потому что мой файл не распознает мой идентификатор: feedbackForm. Вот мой код:

    <form is="iron-form" method="get" action="/" id="feedbackForm">
        <paper-textarea name="feedbacks" value="{{feedbackValue::input}}"
                        label="Explain your feedback - required" required></paper-textarea>
        <paper-checkbox name="read" required>You must check this box</paper-checkbox>
        <br>
        <paper-button class="custom indigo popup" type="submit" raised onclick="submitForm(event)"></iron-icon>
            Submit
        </paper-button>
        <div class="output"></div>
    </form>

И вот мой сценарий:

<script>

    function submitForm(event) {
        console.log('enfin');
        Polymer.dom(event).localTarget.parentElement.submit();
        console.log(Polymer.dom(event).localTarget.parentElement);
    }

    feedbackForm.addEventListener('iron-form-submit', function (event) {
        this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
    });

    Polymer({
        is: 'at-feedback-panel',

    });


</script>

Кто-то знает, что происходит с железной формой? Когда я пытаюсь это сделать, мой браузер сообщает мне, что feedbackForm неизвестен.

Answer 1

1. Попробуйте изменить "feedbackForm.addEventListener (..." на "document.getElementById('feedbackForm"). AddEventListener(.."

Слушатель событий:

document.getElementById('feedbackForm').addEventListener('iron-form-submit', function (event) {
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});

2. Событие Listerner должно вызываться, когда HTML DOM готов. Итак, переместите все script коды внутри $(document).ready(function(){...})

Похоже:

<script>

$(document).ready(function({

  function submitForm(event) {
    console.log('enfin');
    Polymer.dom(event).localTarget.parentElement.submit();
    console.log(Polymer.dom(event).localTarget.parentElement);
  }

  document.getElementById('feedbackForm').addEventListener('iron-form-submit', function (event) {
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
  });

  Polymer({
    is: 'at-feedback-panel',
  });

}));