Question

我目前正在使用Polymerfire并尝试使用一个小应用程序将Firebase上存储的一些数据列为纸卡。我已经使用了谷歌实验室示例中的一些代码来构建应用程序，因此其代表如下：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <title>Beer Cellar</title>
      <link rel="manifest" href="manifest.json">      
    <style>
      body {
        margin: 0;
      }
    </style>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="beer-list-app.html">      
  </head>
  <body>   
      <firebase-app
    name="BeerCellar"
    api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    auth-domain="beercellar-627fc.firebaseapp.com"
    database-url="https://beercellar-627fc.firebaseio.com">
</firebase-app>
<beer-list-app></beer-list-app>
  </body>
</html>

啤酒一览app.html

<link rel="import" href="bower_components/polymerfire/polymerfire.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<dom-module id="beer-list-app">
    <template>
    <firebase-query
        id="query"
        log
        app-name="BeerCellar"
        path="/brands"
        data="{{branddata}}">
    </firebase-query>

    <template is="dom-repeat" items="[[branddata]]" as="brand">

        <paper-card heading="[[brand.name]]">
      <div class="card-content">[[brand.origin]]</div>
    </paper-card>
    </template>
</template>
    <script>
    Polymer({
      is: 'beer-list-app',
        properties: {
        uid: String,
        branddata: {
          type: Object,
          observer: 'dataChanged'
        }
      },

      dataChanged: function (newData, oldData) {
        // do something when the query returns values
          console.log("NewData: " + newData);
      }
    });
    </script>
</dom-module>

然而，它似乎无法正常工作而且没有显示任何内容。我已将log属性添加到firebase-query并在控制台上获得以下内容：

Initializing stored value.
polymer-micro.html:673 Polymer::Attributes: couldn`t decode Array as JSON
app-storage-behavior.html:350 Got stored value! undefined {{branddata}}

我已尝试将模板上的项目更改为[[branddata]]，结果相同。

错误抛出的polymer-micro.html代码：

deserialize: function (value, type) {
switch (type) {
case Number:
value = Number(value);
break;
case Boolean:
value = value != null;
break;
case Object:
try {
value = JSON.parse(value);
} catch (x) {
}
break;
case Array:
try {
value = JSON.parse(value);
} catch (x) {
value = null;
console.warn('Polymer::Attributes: couldn`t decode Array as JSON');
}
break;

根据Chrome开发工具，JSON.parse的变量值包含{{branddata}}或[[branddata]]，具体取决于我在模板上的定义方式。

有些东西我不见了。

编辑：我更改了一些beer-list-app.html添加了dom-module。现在json错误消失了，日志显示如下：

Initializing stored value.
beer-list-app.html:33 BrandData: 
app-storage-behavior.html:350 Got stored value! undefined []

编辑2：我在beer-list-app.html中修改了数据更改函数的代码，如getbuckts建议的那样。我的控制台将newData记录为空。

提前致谢。

Answer 1

您是否已登录该应用程序？在决定查看我的权限之前，我遇到了同样的问题。尝试更改您的权限。

使用Polymerfire

的index.html

啤酒一览app.html

1 个答案: