聚合物自定义元素与firebase的javascript数据绑定错误

时间:2016-08-15 16:41:46

标签: javascript firebase polymer polymer-1.0 polymer-starter-kit

我目前正在尝试使用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

元素将在布道和冥想标签上导入。

聚合物和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网站和聚合物项目网站上的文档都跟到了“T”,但仍然无法使其工作。我很反感聚合物火,如果你给我一个工作的例子,我会试试,但我永远不会让聚合物燃烧起作用。

P.S。 〜我知道我把api键留在了片段中......这没关系。无论如何,它都面向网站。

0 个答案:

没有答案