Fatal编程技术网
  • web/
  • Web Polymer 1.2 FIREBASE警告：用户回调引发异常

Web Polymer 1.2 FIREBASE警告：用户回调引发异常

web firebase polymer

Web Polymer 1.2 FIREBASE警告：用户回调引发异常,web,firebase,polymer,components,Web,Firebase,Polymer,Components,我对polymer和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 Pr

我对polymer和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.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);
  });
};
不客气，定义回调时一定要小心！：）完美的多谢各位 
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);
  });
};