聚合物自定義元素與firebase的JavaScript數據綁定錯誤

我目前正在嘗試使用返回對象的firebase查詢並對返回的數據執行dom-repeat。我的檢驗機構目前看起來是這樣的：聚合物自定義元素與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

的元素在佈道和冥想標籤進口。是

由聚合物和火力當前控制檯錯誤如下：

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

的事情，錯誤最深的是，我按照雙方的火力點的文檔網站和聚合物項目網站的「T」，仍然無法得到這個工作。我討厭聚合物燃燒，如果你給我一個工作的例子，我會嘗試一下，但是我永遠無法使聚合物燃燒起作用。

P.S. 〜我知道我在片段中留下了api鍵......這沒問題。無論如何，它都是面向網站的網頁。

來源

2016-08-15 Chad Baxter

1. custom-element定義一個名爲posts的屬性，它是一個數組。這不會在代碼中的任何地方更新。 2.在諸如postRef.on（「value」，function（）{...}）之類的回調函數中，這不是調用函數，而是回調函數，所以this.posts不存在是正確的。「this」部分是回調函數，而不是自定義元素3.您的模板重複需要一個對象數組，但是在您的代碼中，您將對象的屬性抽取到單獨的數組中，沒有任何意義。 – 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導入隱式導入Firebase JS SDK。 –

謝謝你，先生，我設法一起破解這個工作與我的應用程序的其餘部分。 –

聚合物自定義元素與firebase的JavaScript數據綁定錯誤

回答

相關問題