CODEWITHSUNDEEP
javascriptarrayspolymer
Gaetano Herman
Gaetano Herman

Reputation: 524

Polymer Array Adding Elements twice

I'm making a to-do application in Polymer 2.0. The problem is when I add a note. It adds it like it should however, when I add another one, he writes 2 notes to the array. I can't find my problem. Also I use var that = this. Couldn't this be done any cleaner?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">

<dom-module id="note-app">
<template>
<app-header reveals>
  <app-toolbar>
    <div main-title>Note</div>
    <paper-icon-button icon="delete" on-tap="deleteAllNotes"></paper-
     icon-button>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="add" on-tap="addNote">+</paper-icon-
    button>
  </app-toolbar>
</app-header>

<paper-dialog id="dialog">
  <h2>Add a new note</h2>
  <paper-input id="title" label="Title of the note"></paper-input>
  <paper-input id="note" label="Content"></paper-input>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus>Accept</paper-button>
  </div>
</paper-dialog>

<template is="dom-repeat" items={{notes}}>
  <div>#: [[index]]</div>
  <div>Title: [[item.title]]</div>
  <div>Title: [[item.note]]</div>
</template>


class NoteApp extends Polymer.Element {
  static get is() { return 'note-app'; }
  static get properties() {
    return {
      notes: {
        type: Array,
        value: [],
        notify: true,
      }
    }
  }

  ready(){
    super.ready();
  }

  addNote(){
    var that = this;
    this.$.dialog.open();
    this.$.dialog.addEventListener('iron-overlay-closed', function(e){
        if(e.detail.confirmed == true){
          that.push('notes', {title: that.$.title.value, note: that.$.note.value})
          that.$.title.value = "";
          that.$.note.value = "";
        }
    });
  }

  deleteAllNotes(){
    this.splice("notes", 0, this.notes.length)
  }
}

window.customElements.define(NoteApp.is, NoteApp);

Upvotes: 0

Views: 137

Answers (1)

Kuba Šimonovsk&#253;
Kuba Šimonovsk&#253;

Reputation: 2043

Prety simple. everytime you click on addNote , one event is created. So for every click, you create one new event which is called together with all previous defined events when iron-overlay close. It means, callback in addEventListener is called multiple times.

move this code inside ready function:

   this.$.dialog.addEventListener('iron-overlay-closed', function(e){
        if(e.detail.confirmed == true){
          that.push('notes', {title: that.$.title.value, note: that.$.note.value})
          that.$.title.value = "";
          that.$.note.value = "";
        }
    });

Upvotes: 1

Related Questions