Question

我正在尝试使用包含待办事项列表的应用。使用Polymer和Firebase待办事项作为实现它的基础。

以下代码中的updateItem函数存在问题。 addItems正常工作。我无法列出这些项目。它显示以下错误： Firebase.push失败：第二个参数必须是有效函数

在对updateItems的调用中，在onFirebaseLogin中，我有错误函数。

代码如下：

<link rel="import" href="../bower_components/jv-datepicker/jv-datepicker-dialog.html">

<dom-module id="my-view1">

<template id="app">
<firebase-auth
  auto-login
  redirect
  location="[[firebaseURL]]"
  provider="[[firebaseProvider]]"
  on-error="onFirebaseError"
  on-login="onFirebaseLogin"></firebase-auth>
  <style>
   :host {
    display: block;
  }
  .card {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    padding: 16px;
    margin: 24px;
    border-radius: 5px;
    background-color: #fff;
    color: #757575;
  }
  .circle {
    display: inline-block;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background: #ddd;
    line-height: 64px;
    font-size: 30px;
    color: #555;
    text-align: center;
  }
  h1 {
    font-size: 22px;
    margin: 16px 0;
    color: #212121;
  }
  #menudropdown {

    width: 100%;
  }
  div.buttons-style {
    @apply(--layout-vertical);
    @apply(--layout-center);
  }

  paper-button.green {
        background-color: var(--paper-green-500);
        color: white;
        width: 20%;
        font-size: 12px;
        padding: 10px;
        margin: 10px;

  }
  paper-tab {
        background-color: var(--paper-green-500);
        color: white;
        padding: 2px;
        width: 33%;
        scrollable:true;
  }
  paper-tabs {
        width:100%%; 
        --paper-tabs-selection-bar{
          color:#ddd;
        }
  }
  div.datepicker-dialog {
    height: 64px;
    font-size: 12px;
    margin: 8px 0;
    @apply(--layout-horizontal);
    @apply(--layout-center);
  }
  paper-button.date {
        background-color: var(--paper-green-500);
        color: white;
        width: 100%;
        font-size: 12px;
        padding: 10px;
        margin: 10px;

  }
  div.datepicker-component {

    @apply(--layout-vertical);
    @apply(--layout-center);
  }

</style>

 <paper-tabs selected="{{selected}}">
 <paper-tab>Tasks</paper-tab>
  </paper-tabs>

  <iron-pages selected="{{selected}}">
  <div>
  <form is="iron-form" method="get" action="/view2" id="mainform">
    <paper-input class="valueitem" value="{{newItemValue}}"
    placeholder="Enter your item here..."></paper-input>
      <div class="datepicker-component">
      <div class="datepicker-dialog">
        <paper-button raised  id = "todoDate" class = "date" on-tap="_openStaticDialog"> {{staticDate}}</paper-button>
        <jv-datepicker-dialog id="static" with-backdrop theme="[[theme]]" view="{{view}}" first-day-of-week="[[firstDayOfWeek]]" disable-days="[[disableDays]]" min-date="[[minDate]]" max-date="[[maxDate]]" format="[[format]]" date="{{staticDate}}" show-long-date="[[showLongDate]]" no-animation locale="[[locale]]"></jv-datepicker-dialog>
      </div>
    </div>
      <div class="buttons-style">
                <span class="flex"></span>

      <paper-button class = "green" raised on-click="addItem">Add</paper-button>
    </div >
    </form>

    <template is="dom-repeat" items="{{items}}">
      <div>

      <paper-icon-button icon="delete"
      on-click="deleteItem"></paper-icon-button>
    <paper-checkbox on-change="toggleItem"
      checked="{{item.done}}">[[item.text]]</paper-checkbox>
  </div>
</template>

 <script>


  Polymer({

  is: 'my-view1',

  properties: {

    firebaseURL: {
      type: String,
      readOnly:true,
      value: 'https://gisapp.firebaseio.com'
    },
    firebaseProvider: {
      type: String,
      readOnly:true,
      value: 'anonymous'
    },


     },
  updateItems : function(snapshot) {
    //this.items = [];
       var itemlist= 'this.items';
       snapshot.forEach(function(childSnapshot) {      
       var item = childSnapshot.val();
       item.uid = childSnapshot.key();
       this.ref.push('items',item);
     }.bind(this));
   },

   addItem : function(event) {
       event.preventDefault(); // Don't send the form!
       this.ref.push({
       done: false,
       date: this.staticDate,
       text: this.newItemValue
    });
      this.newItemValue = '';
   },

   toggleItem : function(event) {
        this.ref.child(event.model.item.uid).update({done:  event.model.item.done});
   },

    deleteItem : function(event) {
        this.ref.child(event.model.item.uid).remove();
     },

     onFirebaseError : function(e) {
           this.$.errorToast.text = e.detail.message;
           this.$.errorToast.show();
     },
     onFirebaseLogin : function(e) {

           this.ref = new Firebase(this.firebaseURL + '/user/' + e.detail.user.uid);

          var self = this;
          this.ref.on('value', function(snapshot) {
          self.updateItems(snapshot);
       }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
});

    },

                _openStaticDialog: function(ev) {
                    this.$.static.open();
              }
                  });

           </script>
       </dom-module>

有什么建议代码有什么问题吗？

感谢。

Answer 1

你使用推错了，推送应该是这样的：

//if you only want to create a non repeatable key
newRef = ref.push()
newKey = newRef.key
//if you don't care of the callback
ref.push(object_to_be_saved)
//if you need to verify the success of the write 
ref.push(object_to_be_saved,onCompleteCallback)

//例

ref.push({item:value},function(error){
   if(error){
     //push failed
   }
})

此处定义了用法 https://firebase.google.com/docs/reference/js/firebase.database.Reference#push

从Polymer和Firebase应用程序中的firebase更新项目列表

1 个答案: