폴리머 사용자 정의 요소 파이어베이스를 사용한 자바 스크립트 데이터 바인딩 오류

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

요소는 설교와 명상 탭을 가져옵니다. 다음과 같이 고분자와 중포 기지에서

현재 콘솔 오류는 다음과 같습니다

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

것은 버그 내가 가장 내가 중포 기지 모두에 대한 설명서를 준수했는지입니다 웹 사이트 및 폴리머 프로젝트 웹 사이트를 "T"로 변경하더라도 여전히 작동하지는 않습니다. 나는 고분자 연소를 원한다. 실용적인 예를 들어 주면 시도해 보겠다. 그러나 결코 고분자 연소가 작동하지 않을 수있다.

P. ~ 나는 스 니펫에 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>