2015-12-16 17 views
6

によってスローされた私は、ポリマーおよびfirebaseといくつかの問題を持って、私はfirebaseにデータを挿入するために管理が、それはこれまでのところ、その自分のコード以下のエラーポリマー1.2 FIREBASE警告:例外は、ユーザー・コールバック

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null 

をスローします。

<!doctype html> 
<!-- 
@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 
--> 

<html lang=""> 

<head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="generator" content="Polymer Starter Kit" /> 
    <title>Soulmatters</title> 
    <!-- Place favicon.ico in the `app/` directory --> 

    <!-- Chrome for Android theme color --> 
    <meta name="theme-color" content="#2E3AA1"> 

    <!-- Web Application Manifest --> 
    <link rel="manifest" href="manifest.json"> 

    <!-- Tile color for Win8 --> 
    <meta name="msapplication-TileColor" content="#3372DF"> 

    <!-- Add to homescreen for Chrome on Android --> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <meta name="application-name" content="PSK"> 
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> 

    <!-- Add to homescreen for Safari on iOS --> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit"> 
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"> 

    <!-- Tile icon for Win8 (144x144) --> 
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> 

    <!-- build:css styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild--> 

    <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <!-- endbuild --> 

    <!-- will be replaced with elements/elements.vulcanized.html --> 
    <link rel="import" href="elements/elements.html"> 
    <link rel="import" href="../bower_components/firebase-element/firebase-auth.html"> 
<link rel="import" href="../bower_components/firebase-element/firebase.html"> 
<link rel="import" href="../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"> 
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
    <!-- endreplace--> 

    <!-- For shared styles, shared-styles.html import in elements.html --> 
    <style is="custom-style" include="shared-styles"> 
body { 
    font-family: Roboto, sans-serif; 
    color: #333; 
    max-width: 700px; 
    width: 100%; 
    margin: 0 auto; 
} 

form { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    margin-bottom: 20px; 
} 

paper-button { 
    flex-shrink: 1; 
} 
paper-input { 
    flex-grow: 1; 
} 

paper-checkbox { 
    display: inline-block; 
    margin: 5px 0; 
    transition: opacity 0.3s; 
} 

paper-checkbox[checked] { 
    opacity: 0.5; 
} 
    </style> 

</head> 

<body unresolved class="fullbleed layout vertical"> 
    <span id="browser-sync-binding"></span> 
    <template is="dom-bind" id="app"> 
<firebase-auth 
    auto-login 
    redirect 
    location="[[firebaseURL]]" 
    provider="[[firebaseProvider]]" 
    on-error="onFirebaseError" 
    on-login="onFirebaseLogin"></firebase-auth> 
<paper-toast id="errorToast"></paper-toast> 


    <form on-submit="addItem"> 
     <paper-input value="{{articolNou}}" 
     placeholder="Enter your item here..."></paper-input> 
     <paper-button on-click="addItem">Add</paper-button> 
    </form> 
    <template is="dom-repeat" items="{{articol}}"> 
     <div> 
     <div>{{articolNou}}</div> 
     </div> 

</template> 
    </template> 

    <!-- build:js scripts/app.js --> 
    <script src="scripts/app.js"></script> 
    <!-- endbuild--> 
</body> 

</html> 

そしてこのapp.js

(function(document) { 
    'use strict'; 

    var app = document.querySelector('#app'); 



    app.articole = []; 

app.updateArticole = function(snapshot) { 
    this.articole = ['articole']; 
    snapshot.forEach(function(childSnapshot) { 
    var item = childSnapshot.val(); 
    item.uid = childSnapshot.key(); 
    this.push('articole', item); 
    }.bind(this)); 
}; 


app.addItem = function(event) { 
    event.preventDefault(); // Don't send the form! 
    this.ref.push({ 
    text: app.articolNou 
    }); 
    app.articolNou = ''; 
}; 

/*app.toggleItem = function(event) { 
    this.ref. 
    child(event.model.item.uid). 
    update({done: event.model.item.done}); 
}; 

app.deleteItem = function(event) { 
    this.ref.child(event.model.item.uid).remove(); 
}; 
*/ 


app.firebaseURL = 'https://soulmatters.firebaseio.com'; 
app.firebaseProvider = 'google'; 


app.onFirebaseError = function(event) { 
    this.$.errorToast.text = event.detail.message; 
    this.$.errorToast.show(); 
}; 

app.onFirebaseLogin = function(event) { 
    this.ref = new Firebase(this.firebaseURL + '/user/' + 
                event.detail.user.uid); 
    this.ref.on('value', function(snapshot) { 
    this.updateArticole(snapshot); 
    }); 
}; 
})(document); 

答えて

8

は、このようなあなたのコードを変更してみている:

app.onFirebaseLogin = function(event) { 
    this.ref = new Firebase(this.firebaseURL + '/user/' + 
                event.detail.user.uid); 
    var self = this; 
    this.ref.on('value', function(snapshot) { 
    self.updateArticole(snapshot); 
    }); 
}; 
+0

はい、それは働いていた、それは非常にうまく仕事をしてくれました。ありがとう! –

+0

あなたは歓迎します、コールバックを定義するときは常に注意してください! :) –

+0

パーフェクト!どうもありがとうございます –

関連する問題