Политический пользовательский элемент javascript с привязкой к ошибкам с firebase

Question

В настоящее время я пытаюсь использовать запрос 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 веб-сайт и веб-сайт с полимерным проектом до «Т» и все еще не могут заставить его работать. Я возмущаюсь полимером, если вы дадите мне рабочий пример, я попробую, но я никогда не смогу работать с полимером.

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>