Polymer 1.0：强制重新加载浏览器以使 <firebase-collection> 数据自动填充

Question

目标

当我登录和注销我的应用程序时，我想自动从我的 <firebase-document> 元素加载数据，如下所示。

我的-settings.html

<firebase-document location="[[app.firebase.settings]]"
                   data="{{app.settings}}">
</firebase-document>

预期行为

从登录状态，我希望能够注销。然后重新登录并自动填充 app.settings。换句话说：

console.log

app == { foo: bar,
         settings: baz
       }

实际行为

从登录状态开始，如果我注销然后重新登录，app 对象根本不包含 settings 属性。换句话说：

console.log

app == { foo: bar }

重新加载浏览器作为解决方法

作为黑客，如果我首先重新加载浏览器，我可以获得预期的结果。 注销 > 重新加载浏览器 > 登录 产生以下预期结果：

console.log
app == { foo: bar, settings: baz }

问题

我应该尝试什么方法让 settings 属性在 logout > login 之后自动填充我的 app 对象而不必重新加载作为中间步骤？即，注销 > 重新加载浏览器 > 登录.

这可能是我不理解的生命周期或注册问题吗？或者是其他东西？（我只是需要一个大概的方向去追求。）

Answer 1

尝试设置而不是 app.settings 来解决值更新问题。要隐藏值，您可以使用 dom-if 模板并在 Firebase 上设置安全 read/write 规则。

<template is="dom-if" if="[[user]]">
  <firebase-document 
    location="[[app.firebase.settings]]"
    data="{{settings}}">
  </firebase-document>
</template>

<firebase-auth location="[[app.firebase]]" user="{{user}}"></firebase-auth>

Answer 2

，有效的代码如下：

我的-settings.html

<firebase-document location="[[app.firebase.settings]]"
                   data="{{settings}}">
</firebase-document>
<paper-input value="{{settings.email}}"
             label="Email">
</paper-input>
...
<script>
  (function(){
    Polymer({
      is: 'my-settings',
      properties: {
        app: {
          type: Object,
          notify: true
        },
      settings: {
        type: Object,
        notify: true,
        observer: '_settingsChanged'
      },
      _settingsChanged: function() {
        this.set( 'app.settings', this.settings);
      }
    });
  })();
</script>

我的-controller.html

<my-settings id="settings"></my-settings>
...
_handleLogout: function() {
  this.$.settings.set('settings', {});
},

Polymer 1.0：强制重新加载浏览器以使 <firebase-collection> 数据自动填充

Polymer 1.0: Forced to reload browser for <firebase-collection> data to automatically populate

polymer

polymer-1.0

目标

预期行为

实际行为

重新加载浏览器作为解决方法

问题