1

紙の入力から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 要素から取得されます

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

私は on-change 属性よりもオブザーバーを使用しています。これは、ユーザーが入力を永続化するために入力から移動する必要があるという考えが嫌いだからです。また、PolymerFire を使用しないことを選択しました。これは、必要な機能がいくつかなく、生産準備が整っていないためです。

また、データが変更される前にオブザーバーが複数回実行されるという考えも好きではありません。そして、それはそれを壊すべきだと私は思ったが、驚いたことにうまくいっている。

他にどのようなオプションがありますか? 現在のソリューションに不利な点はありますか?

4

2 に答える 2

1

欠点の 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>

コードペン

于 2016-06-26T22:12:41.413 に答える