How to add/remove item to/from <firebase-query>?

[Hunsin]

Hi,

I wonder if there's any method to push new item and update to remote database automatically?

And, if there's similar method like "removeByKey" in previous firebase-element <firebase-collection>?

[FluorescentHallucinogen]

<firebase-query> is just a one-way lookup to Firebase database that returns a filtered, ordered, immutable set of data, so any changes on this data do not make sense, because it will not be sent back up and stored to the database.

But it's possible to operate on firebase-query's ref data. Something like this:

<firebase-query
    id="query"
    ref="{{ref}}"
    path="/notes"
    data="{{notes}}">
</firebase-query>

<paper-input
    id="input"
    value="{{value}}">
</paper-input>

addNote() {
  this.$.query.ref.push({
    content: this.$.input.value
  });
}

or just

addNote() {
  this.ref.push({
    content: this.value
  });
}

See also #112.

[jukbot]

For delete by key

<template is="dom-repeat" items="[[notes]]" as="item">
    <note-element data="[[item]]" on-tap="deleteNote"></note-element>
</template>

deleteNote(e) {    
    const key = e.currentTarget.note.$key;
    this.$.query.ref.child(key).remove();
}

[bkr32]

@jukbot that keeps returning a undefined error for me

[jukbot]

@bkr32

sorry that code is just an example. By default that note-element has already integrated delete method inside the parent element.

So if you want to delete it directly you can use custom properties to define the item values.

<template is="dom-repeat" items="[[notes]]" as="item">
    <some-element data="[[item]]" cat="[[item]]" on-tap="deleteNote"></some-element>
</template>

deleteNote(e) {    
    const key = e.currentTarget.cat.$key;
    this.$.query.ref.child(key).remove();
}

[bkr32]

thanks for clarifying that for me @jukbot with my current project i'm just having a great deal of difficulty deleting a note, with the main issue being the inability to get the $key.