Синхронизация ввода бумаги с огненной базой с использованием полимера

Как это для решения для передачи данных из бумажного ввода в базу данных Fire base.

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, потому что у меня нет некоторых функций, которые мне нужны, и он не готов к производству.

Мне также не нравится идея, что наблюдатель запускается несколько раз, прежде чем какие-либо данные были изменены. И это должно, я думал, сломать это, но это работает, к моему удивлению.

Какие еще варианты у меня есть? Есть ли у них какие-либо недостатки моего текущего решения?

Источник

2 ответа

Решение

Одним из недостатков является то, что каждое нажатие клавиши запускает запрос к Firebase, что может быть неэффективно (потеря процессора и пропускной способности).

Чтобы решить эту проблему, вы можете отменить ответный вызов с 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

Источник

Я решил пойти с on-keyup="_updateViewDesc" чтобы остановить ошибку, возникающую, когда у нескольких клиентов открыта одна и та же страница. Использование наблюдателей, когда некоторые данные обновляются, запускает наблюдателя на всех подключенных клиентах. В результате чего персонажи пропадают без вести.

Источник
Другие вопросы по тегам