Polymer 自定义元素 javascript 与 firebase 的数据绑定错误

Question

我目前正在尝试使用 returns 对象的 firebase 查询并对返回的数据执行 dom-repeat。我的测试元素目前看起来像这样：

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">

<!-- App imports -->
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../styles/app-theme.html">

<!-- Firebase script -->
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-storage.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCsZHdalcUQgkhmAkIsnJ66ltkgNakOh20",
    authDomain: "church-of-our-savior-oatlands.firebaseapp.com",
    databaseURL: "https://church-of-our-savior-oatlands.firebaseio.com",
    storageBucket: "church-of-our-savior-oatlands.appspot.com",
  };
  var firebaseWorker = firebase.initializeApp(config);
</script>


<dom-module id="custom-content">
  <template>

    <span value="[[type]]" id="dummytype"/>
    <h1 class="page-title">[[type]]s</h1>
    <template is="dom-repeat" items="posts">

      <style>
        :host {
          display: inline-block;
        }
      </style>

      <paper-card elevation="1">
        <p>{{item}}</p>
        <h1 class="page-title" tabindex="-1">{{item.titl}}</h1>
        <h3>{{item.author}}</h3>
        {{item.cont}}
      </paper-card>

    </template>
  </template>
  <script>
    Polymer({
      is: 'custom-content',
      porperties: {
        posts: {
          type: Array,
          notify: true
        }
      },
      ready: function() {
        firebase.auth().signInAnonymously()
        var postsRef = firebase.database().ref("/" + this.$.dummytype.value + "/").orderByKey();
        var titls = [];
        var authors = [];
        var conts = [];
        postsRef.on("value", function(snapshot) {
          snapshot.forEach(function(postSnapshot) {
            titls.push(postSnapshot.val().titl);
            authors.push(postSnapshot.val().author);
            conts.push(postSnapshot.val().contents);
          });
          //document.querySelector('template').items = posts;
          this.posts.titl = titls;
          this.notifyPath('posts.titl', this.posts.titl);
          this.posts.author = authors;
          this.notifyPath('posts.author', this.posts.author);
          this.posts.cont = conts;
          this.notifyPath('posts.cont', this.posts.cont);
        });
      }
    });
  </script>

可在此处找到网站的实时版本： http://church-of-our-savior-oatlands.firebaseapp.com

该元素已导入布道和冥想选项卡。

当前来自 polymer 和 firebase 的控制台错误如下：

Polymer::Attributes: couldn't decode Array as JSON

FIREBASE WARNING: Exception was thrown by user callback. .ready/<@http://localhost:5000/elements/custom-content/custom-content.html-1.js:23:11
g.Ub/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:179:537
Tb@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:53:165
uc@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:33:215
vc@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:32:837
g.Hb@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:217:287
g.wd@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:152:246
qg.prototype.wd@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:142:359
sg/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:140:278
cg@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:124:462
$f.prototype.open/this.La.onmessage@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:123:245
EventHandlerNonNull*$f.prototype.open@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:122:444
setTimeout handler*rg@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:137:181
qg@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:136:1071
Pg/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:157:481
td/e.child</e.Aa<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:52:489
Cd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:215
yd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:100
H.prototype.Pd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:401
id@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:474
Async*ed/dd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:222
hd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:101
zd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:224
ld@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:54:146
H/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:824
dg/</<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:127:131
S.prototype.Ae/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:123:366
Yd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:71:245
h.dispatchEvent@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:69:395
Fe@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:85:68
L.prototype.re@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:83:442
L.prototype.kd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:83:404
EventHandlerNonNull*L.prototype.send@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:79:315
S.prototype.Ae@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:124:37
Zf@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:122:333
dg/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:127:93
H@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:803
dg@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:127:73
R/<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:135:163
td/e.child</e.Aa<@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:52:489
Cd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:215
yd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:100
H.prototype.Pd@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:401
id@https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:474

TypeError: this.posts is undefined

最让我烦恼的是，我已经按照 firebase 网站和 polymer-project 网站上的文档找到 "T"，但仍然无法正常工作。我讨厌 polymerfire，如果你给我一个工作示例，我会尝试一下，但我永远无法让 polymerfire 工作。

P.S。 ~ 我知道我在代码段中留下了 api 键...这没关系。无论如何，它在网站上都是面向网络的。

Answer 1

我强烈建议您重新考虑使用 PolymerFire。它是专门为解决此类问题而设计的。您的示例看起来更像：

<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">
<firebase-app api-key="AIzaSyCsZHdalcUQgkhmAkIsnJ66ltkgNakOh20",
  auth-domain="church-of-our-savior-oatlands.firebaseapp.com",
  database-url="https://church-of-our-savior-oatlands.firebaseio.com",
  storage-bucket="church-of-our-savior-oatlands.appspot.com"></firebase-app>

<dom-module id="custom-content">
  <template>
    <firebase-query path="/[[type]]" data="{{posts}}"></firebase-query>

    <span value="[[type]]" id="dummytype"/>
    <h1 class="page-title">[[type]]s</h1>
    <template is="dom-repeat" items="[[posts]]">

      <style>
        :host {
          display: inline-block;
        }
      </style>

      <paper-card elevation="1">
        <p>{{item}}</p>
        <h1 class="page-title" tabindex="-1">{{item.titl}}</h1>
        <h3>{{item.author}}</h3>
        {{item.cont}}
      </paper-card>

    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'custom-content',
    properties: {
      type: {type: String},
      posts: {type: Array}
    }
  });
</script>

Polymer 自定义元素 javascript 与 firebase 的数据绑定错误

Polymer custom element javascript data binding errors with firebase

javascript

firebase

polymer

polymer-1.0

polymer-starter-kit