使用聚合物将纸张输入与 firebase 同步

Question

将纸质输入的数据同步到 Firebase 数据库的解决方案如何？

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);
        },

数据metaName来自纸张输入元素

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

我在 on-change 属性上使用观察者，因为我讨厌用户必须移出输入才能持续存在的想法。我还选择不使用 PolymerFire，因为我没有我需要的一些功能，而且它还没有准备好生产。

我也不喜欢观察器在任何数据更改之前运行多次的想法。我认为这应该会破坏它，但它的工作令我惊讶。

我还有哪些其他选择？它们对我当前的解决方案有什么缺点吗？

Answer 1

一个缺点是每次击键都会触发对 Firebase 的请求，这可能效率低下（浪费 CPU 和带宽）。

为了解决这个问题，您可以使用 this.debounce(jobName, callback, wait) 去抖动回调，如以下演示所示。

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

Answer 2

我决定使用 on-keyup="_updateViewDesc" 来阻止多个客户端打开同一页面时发生的错误。使用观察者，当一些数据更新时，它会触发所有连接的客户端上的观察者。导致字符丢失。

使用聚合物将纸张输入与 firebase 同步

Syncing a paper-input with firebase using polymer

firebase

polymer

firebase-realtime-database

firebase-polymer