Syncing a paper-input with firebase using polymer

Question

How is this for a solution for syning the data from a paper input to a firebase database.

properties: {
            teamid: {
                type: String,
                value: null
            },
            formid: {
                type: String,
                value: null
            },

            metaName: {
                type: String, 
                value: null,
                observer: '_updateMetaName'
            }
        },


        _updateMetaName: function(metaName) {
            var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';

            firebase.database().ref(path).set(metaName);
        },

The data metaName comes from a a paper-input element

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

I'm using an observer over the on-change attribute because I hate the idea that a user must move out of an input for it to persist. I've also chosen not to use PolymerFire because i dosen't have some features I need and its not production ready.

I also don't like the idea that the observer runs multiple times before any data has been changed. And that should, i thought, break it but its working to my surprise.

What other options do I have? Are their any disadvantages to my current solution?

score 1 · Accepted Answer · answered Jun 26 '16 at 22:12

One disadvantage is that every keystroke fires off a request to Firebase, which could be inefficient (a waste of CPU and bandwidth).

To address this, you could debounce the callback with this.debounce(jobName, callback, wait), as shown in the following demo.

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties : {
      metaName: {
        type: String,
        value: 'Hello world!',
        observer: '_metaNameChanged'
      }
    },
    _setFirebaseMetaName: function(metaName) {
      var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';
      //firebase.database().ref(path).set(metaName);
      console.log('metaName', metaName);
    },
    _metaNameChanged: function(metaName) {
      this.debounce('keyDebouncer',
                    _ => this._setFirebaseMetaName(metaName),
                    500);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-input label="Meta Name" value="{{metaName}}"></paper-input>
    </template>
  </dom-module>
</body>

codepen

That's an [ES6 arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). It's shorthand for a parameterless callback (technically the underscore is a parameter that we ignore): `function(_) {}`, which is equivalent to `function() {}`. — tony19, Jun 27 '16 at 09:01

Snewedon · Answer 2 · 2016-07-04T20:35:12.390

1

I've decided to go with on-keyup="_updateViewDesc" to stop a error occurring when multiple clients have the same page open. Using observers, when some data updates, it triggers the observer on all the connected clients. Causing characters to go missing.

edited Jul 04 '16 at 20:35

answered Jun 29 '16 at 15:58

Snewedon

2,410
2
13
27

Syncing a paper-input with firebase using polymer

2 Answers2