Question

我在聚合物和firebase方面遇到了一些问题，我设法将数据插入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);

Answer 1

尝试修改您的代码：

db.getProfileDocument

Polymer 1.2 FIREBASE WARNING：用户回调引发了异常

1 个答案: