Polymerカスタム要素firebaseでのjavascriptデータバインディングエラー

現在、オブジェクトを返すfirebaseクエリを使用しようとしていて、返されたデータに対してdom-repeatを実行しています。私のテスト要素は、現在、次のようになります。Polymerカスタム要素firebaseでのjavascriptデータバインディングエラー

<!-- 
 
@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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:53:165 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:33:215 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:32:837 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:217:287 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:152:246 
[email protected]://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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:124:462 
$f.prototype.open/[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:123:245 
EventHandlerNonNull*[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:122:444 
setTimeout handler*[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-database.js:137:181 
[email protected]://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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:215 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:100 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:401 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:474 
Async*ed/[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:222 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:101 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:224 
[email protected]://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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:71:245 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:69:395 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:85:68 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:83:442 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:83:404 
EventHandlerNonNull*[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:79:315 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:124:37 
[email protected]://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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:803 
[email protected]://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 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:215 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:56:100 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:55:401 
[email protected]://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js:49:474

TypeError: this.posts is undefined

事バグ私はほとんど私がfirebase両方のドキュメントに従っていることであることウェブサイトとポリマープロジェクトのウェブサイトを "T"にしても、これを動作させることはできません。私はポリマーファイアを嫌っていますが、あなたが私にそれを試してみましょう。しかし、私は決してポリマーファイアを働かせることはできません。

P.S. 〜私はスニペットでAPIキーを残したことを知っている...これは大丈夫です。それはとにかくサイトに面するウェブです。

出典

2016-08-15 Chad Baxter

1. custom要素は、配列というpostsというプロパティを定義します。これはコード内のどこでも更新されません。 2. postRef.on（ "value"、function（）{...}）などのコールバック関数では、このスコープは呼び出し元関数ではなく、this.postsが存在しないコールバック関数は正しいです。テンプレートリピートはオブジェクトの配列を期待していますが、コード内では、オブジェクトのプロパティを各フィールドの別々の配列に抽出しています...それは、何の意味もない。 – getbuckts

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>

出典

2016-08-15 20:49:23

私は見ていきます。私はそれを正しくロードすることは決してできませんでした。 firebase.jsのインポートが必要か、それともpolymerfireのインポートだけで設定されていますか？ –

PolymerFireインポートは、Firebase JS SDKを暗黙的にインポートします。 –

ありがとう、私は私のアプリの残りの部分で動作するように一緒にこれをハックすることができました。 –

Polymerカスタム要素firebaseでのjavascriptデータバインディングエラー

答えて

関連する問題