0
할 일 목록이 포함 된 앱을 만들려고합니다. Polymer 및 Firebase to-do 응용 프로그램을 사용하여 응용 프로그램을 구현합니다.Polymer 및 Firebase 앱 firebase의 항목 목록 업데이트
아래 코드의 updateItem 함수에 문제가 있습니다. addItems가 올바르게 작동합니다. 항목을 나열 할 수 없습니다. Firebase.push 실패 : 두 번째 인수는 유효한 함수 여야합니다.
onFirebaseLogin에서 updateItems를 호출 할 때 오류 기능이 있습니다.
코드는 아래와 같다 :
<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>
코드에 어떤 문제가 있습니까?
감사합니다.