1

我目前从 Polymerfire 开始，并尝试做一个小应用程序来列出存储在 Firebase 上的一些数据作为纸卡。我使用了谷歌实验室示例中的一些代码来构建应用程序，因此它的立场如下：

索引.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>

beer-list-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：我按照 getbuckts 的建议修改了 beer-list-app.html 中数据更改函数的代码。我的控制台将 newData 记录为空。

提前致谢。

4

1 回答 1

0

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

于 2017-02-27T15:08:31.313 回答