I am currently working on a to-do application using Polymer 2.0. One issue I'm facing is that when I add a note, it adds it as expected. However, when I try to add another note, it duplicates the notes in the array. I am having difficulty pinpointing the source of this problem. Additionally, I am using var that = this in my code. Is there a cleaner way to achieve the same functionality?
<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);