Question

这是如何将数据从纸张输入同步到firebase数据库的解决方案。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:padding="@dimen/spacing_standard"
          android:orientation="vertical"
          android:background="@color/sfly_orange"
          android:fillViewport="true">


<com.shutterfly.android.commons.common.ui.TypefacedTextView
        android:id="@+id/thank_you_label_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/order_confirmation_thank_you"
        android:textColor="@android:color/white"
        android:textSize="@dimen/rate_app_text_size_largest"
        android:gravity="center"
        app:typeface="medium"
        android:layout_marginTop="@dimen/spacing_standard"/>

<ImageView
        android:layout_width="@dimen/rate_app_image_width"
        android:src="@drawable/rate_icon"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/rate_app_spacing_standard"
        android:layout_height="@dimen/rate_app_image_height"/>

<LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/rate_app_spacing_standard">

    <com.shutterfly.android.commons.common.ui.TypefacedTextView
            android:id="@+id/order_number_label_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:typeface="medium"
            android:text="@string/order_confirmation_order_number_label"
            android:textColor="@android:color/white"
            android:textSize="@dimen/rate_app_text_size_normal"/>

    <com.shutterfly.android.commons.common.ui.TypefacedTextView
            android:id="@+id/order_number_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:typeface="medium"
            android:layout_marginTop="@dimen/spacing_standard"
            android:textColor="@android:color/white"
            android:textSize="@dimen/rate_app_text_size_larger"/>

    <com.shutterfly.android.commons.common.ui.TypefacedTextView
            android:id="@+id/order_confirmation_details_label_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/order_confirmation_details_label"
            android:layout_marginTop="@dimen/spacing_standard_large"
            android:textAlignment="center"
            android:lineSpacingExtra="@dimen/rate_app_text_line_spacing"
            android:gravity="center"
            app:typeface="oblique"
            android:textColor="@android:color/white"
            android:textSize="@dimen/rate_app_text_size_normal"
            tools:ignore="UnusedAttribute"/>


    <RatingBar
            android:id="@+id/rate_app_rating_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/rate_app_spacing_standard"
            android:numStars="@integer/rating_bar_number_of_stars"
            android:stepSize="@integer/rating_bar_step"
            android:minHeight="@dimen/button_height"
            android:maxHeight="@dimen/button_height"
            style="?android:attr/ratingBarStyle"
            android:layout_gravity="center"
            android:progressDrawable="@drawable/rating_bar_star_style"/>
</LinearLayout>


<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginTop="@dimen/rate_app_spacing_standard">

    <com.shutterfly.android.commons.common.ui.TypefacedTextView
            android:id="@+id/rate_app_button"
            android:layout_width="@dimen/button_width"
            android:layout_height="@dimen/button_height"
            android:gravity="center"
            android:background="@drawable/button_white_background"
            android:paddingLeft="@dimen/spacing_standard"
            android:paddingRight="@dimen/spacing_standard"
            android:text="@string/rate_shutterfly"
            android:textAllCaps="true"
            android:textColor="@color/sfly_orange"
            android:textSize="@dimen/rate_app_text_size_normal_larger"
            app:typeface="medium"/>

    <com.shutterfly.android.commons.common.ui.TypefacedButton
            android:id="@+id/return_to_store_button"
            android:layout_width="@dimen/button_width"
            android:layout_height="@dimen/button_height"
            android:paddingLeft="@dimen/spacing_standard"
            android:layout_marginTop="@dimen/spacing_standard"
            android:layout_gravity="bottom|center_horizontal"
            android:paddingRight="@dimen/spacing_standard"
            android:text="@string/order_confirmation_return_to_store"
            style="?android:attr/borderlessButtonStyle"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textSize="@dimen/rate_app_text_size_normal"
            app:btnTypeface="medium"
            android:layout_marginBottom="@dimen/spacing_standard"
            android:background="@drawable/button_orange_background"/>

</LinearLayout>

</LinearLayout>

数据 metaName 来自纸张输入元素

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

我正在使用on-change属性的观察者，因为我讨厌用户必须移出输入以使其保持不变。我也选择不使用PolymerFire，因为我没有一些我需要的功能，而且还没有准备好生产。

我也不喜欢观察者在任何数据被更改之前多次运行的想法。而且，我认为应该打破它，但它让我感到惊讶。

我还有其他选择吗？他们目前的解决方案有什么缺点吗？

Answer 1

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

要解决此问题，您可以使用this.debounce(jobName, callback, wait)去除回调，如以下演示所示。

＆＃13;

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

＆＃13;

<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>

＆＃13;

codepen

Answer 2

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

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

2 个答案: