googlewebcomponents / firebase-element Goto Github PK
View Code? Open in Web Editor NEWWeb components for the Firebase Web API
Home Page: https://elements.polymer-project.org/elements/firebase-element
Web components for the Firebase Web API
Home Page: https://elements.polymer-project.org/elements/firebase-element
_stopListening
is failing because apparently ref.off()
expects 3 parameters and not for. Removing the last parameter (i.e. this
) seems to fix this.
If I'm not mistaken there is no way to update item. Just to add or remove.
Repro: http://jsbin.com/yuzixa/edit?html,console,output
Uncaught Error: Firebase.child failed: First argument was an invalid path: "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"
This is due to the previous #60 fix which avoided the round-trip modification from the server, which is where the local __firebaseKey__
property is set. Simple fix is to set the new key in add
after push
, as its synchronously available there.
Hi,
I moved to V.1.0.3, it fixed an issue that i was facing: 'Addresses a bug in collection that causes data to be re-initialized after it has already been received from Firebase.' However now see an exception in the log, functionality works good. But the error comes up the 2nd time a user views the page. To recreate the bug do the following:
Since maybe here are more people who could tell me if my problem is related to something firebase specific I will repost my stackoverflow question
I'm having a problem with using a firebase-collection element within a restamped conditional template.
When the page is loaded initially and I set the dom-if condition to true everything works fine (see example below). But when I falsify the condition, set it to true again and the elements get restamped I get the following error:
_Uncaught TypeError: Cannot read property 'forEach' of null Polymer.applySplicesToRemoteData @ firebase-collection.html:322
(Using firebase-document works, but this is no option for me since I have to modify the collection)
<!doctype html>
<html>
<head>
<title>Firebase Collection vs. dom-if restamp</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/firebase-element/firebase.html">
<link rel="import" href="../bower_components/firebase-element/firebase-collection.html">
<link rel="import" href="../bower_components/firebase-element/firebase-document.html">
</head>
<body fullbleed unresolved>
<template id="t" is="dom-bind">
<paper-button on-tap="setCondition">Set condition</paper-button>
<template is="dom-if" if="{{condition}}" restamp>
<div><paper-button on-tap="resetCondition">Reset condition</paper-button></div>
<firebase-collection id="dataConnection" location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<h4>[[dinosaur.__firebaseKey__]]</h4>
<span>Height: </span><span>[[dinosaur.height]]</span><span>m</span>
</template>
</template>
</template>
</body>
<script>
var template = document.querySelector('#t');
document.addEventListener('WebComponentsReady', function () {
template.condition = false;
});
template.setCondition = function(){
template.condition = true;
};
template.resetCondition = function(){
template.condition = false;
};
</script>
</html>
I would have expected the firebase-collection to behave the same on initial creation as on restamping, but it seems that this is not the case...
Hi.
If i'm using variable binded to firebase-collection in my element in computed property as argument parameter, my computed property not updating, when changes occur.
Example:
(function () {
'use strict';
Polymer({
is: 'my-element',
properties: {
list: { // binded to firebase-collection
type: Array,
notify: true
},
filteredList: {
type: Array,
computed: 'computedFilteredList(list, some)'
}
},
computedFilteredList: function (list) {
return list.filter(...);
}
});
})();
Sample project: https://github.com/lapteuh/firebase-element-bug-with-computed-property.
Thanks for your response.
do I just update the {{data}} ? If so it's not working.
https://www.youtube.com/watch?v=k-S_K80ItNs
what am i missing?
Entering new input values does not persist new values in the firebase. No error is fired in the console. Should the observer be changed to dataNameChanged?
When installing with
bower install --save polymer/firebase-element
For polymer 1.0 I get dependency conflicts for webcomponentsjs en polymer
Unable to find a suitable version for webcomponentsjs, please choose one:
1) webcomponentsjs#^0.6.0 which resolved to 0.6.3 and is required by polymer#0.5.6
2) webcomponentsjs#^0.7.2 which resolved to 0.7.6 and is required by polymer#1.0.6, polymer#1.0.6
3) webcomponentsjs#* which resolved to 0.7.6 and is required by core-component-page#0.5.6
Unable to find a suitable version for polymer, please choose one:
1) polymer#^0.5 which resolved to 0.5.6 and is required by firebase-element#0.5.6
2) polymer#~1.0.0 which resolved to 1.0.6 and is required by platinum-push-messaging#1.0.0
3) polymer#^1.0.0 which resolved to 1.0.6 and is required by iron-a11y-keys-behavior#1.0.5
There a references to both _stopListening
as well as _stopListeningTo
, but only the former exists.
When implementing the demo, as written, when using the anonymous
login option, I get the following errors:
Uncaught TypeError: Cannot read property 'login' of undefined
Uncaught TypeError: this.$.firebaseLogin.login is not a function
Similar errors occur for password
option.
Using firebase-collection this way:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polymer Starter Kit</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/firebase-element/firebase-collection.html">
</head>
<body>
<template is="dom-bind">
<firebase-collection
location="https://example.firebaseio.com/entries"
data="{{entries}}"></firebase-collection>
<template is="dom-repeat" items="[[entries]]" as="entry">
<span>[[entry.name]]</span>
</template>
</template>
</body>
</html>
Works fine on first run, but when updating it shows following error in the console:
firebase-collection: Uncaught TypeError: Cannot read property 'slice' of undefined
When an item in firebase get's updated the components call the following code. The given code will call splices on the array which causes any selected item to be deselected.
_onFirebaseChildChanged: function(event) {
this._applyRemoteDataChange(function() {
var value = this._valueFromSnapshot(event.detail.childSnapshot);
var oldValue = this._valueMap[value.firebaseKey];
if (!oldValue) {
this._error('Received firebase-child-changed event for unknown child "' + value.__firebaseKey__ + '"');
return;
}
this._valueMap[oldValue.__firebaseKey__] = null;
this._valueMap[value.__firebaseKey__] = value;
this.splice('data', this.data.indexOf(oldValue), 1, value);
});
},
I'm trying to get the firebase-element sample working, but I'm consistently getting the following error:
Cannot set property '_parent_dinosaurs' of undefined
If I remove the data property, the error goes away, but I'm obviously unable to bind to anything. I do see data logged in the console. Not sure what I'm doing wrong.
Would it be an issue with an extra comma being found at line 211 of firebase-collection.html?
Is it possible to change the location attribute of firebase-collection
dynamically like this:
<firebase-collection
order-by-child="height"
limit-to-first="3"
location="{{myDynamicLocation}}"
data="{{dinosaurs}}"></firebase-collection>
When using the firebase-element
, I'm currently getting closeObserver exceptions. Verified by another user. Commenting out https://github.com/PolymerElements/firebase-element/blob/master/firebase-element.html#L329 allows the element to be used.
This is probably left over from 876121a#diff-5191c63b6d1dae1e7108cdb4d32a52e2L419
cc @cdata
Using provider: google with default popup auth and listening for login event:
The handleLogin function gets called twice. Using DevTools to step through code after calling the login method on the firebase-auth method reveals that in firebase-auth.html _authHandler is called "directly" after completing auth in the popup window, then _loginHandler is fired from somewhere else and _loginHandler calls _authHandler again, thereby resulting in the 'login' event being fired twice.
Am I doing something wrong? Is this intended behaviour?
Thanks,
Joe.
From @salah-saleh on August 12, 2015 17:31
https://elements.polymer-project.org/elements/firebase-element?active=firebase-document
missing the close markup /firebase-document
Copied from original issue: Polymer/polymer#2259
Hi,
This may be a newbie error, and if so I appologize in advance, but we have been ha in some odd "onscreen" data duplication
In using a firebase element on two different pages in two different custom elements, we are pulling on query value a set of test scores from firebase documents that we are dynMically creating on the instance.
The firebase location is keyed to an ID. If the test scores are there we grab them in a vad from the snapshot set them as an object with the ID as the top level key and then ONLY re save the data in this.scores a local array of objects.
The set up was working fine when we used it only in one grid element.
We then, during a redesign, we're moving aspects of the iterative pulls to a a separate "card" to use in the grid.
The grid continued to run on one page. The card was being tested on a second page.
Both card and grid are registered correctly and separately. However, when we go to dump this.scores in the inner HTML of either page we get a double dose of data.
If we remove one element, problem gone.
No idea how this this.score gets crossed with that this.scores, when both are on different pages, in vastly different scopes, but share "this.scores" name space in different nodes.
We haven't played with any globals. And will change names etc., but any idea why this is happening?
When I use firebase-collection on index.html and iterate with iron-list it works.
But when I encapsulate this in my custom element it loads only first item from firebase collection. And I need to refresh dom to make it load all items and display them
I'm unable to get the below to work and update a firebase value. It does update locally, but it is not making it to the server. The code is able to pull firebase data in..
<dom-module id="rem-login-profile">
<template>
<firebase-document id="firebase" location="{{path}}" data="{{userProfile}}"></firebase-document>
</template>
</dom-module>
<script>
Polymer({
is: 'rem-login-profile',
properties: {
rootPath: {
type: String,
value: 'https://------ky.firebaseio.com/users/'
},
uid: {
type: String
},
firebaseKey: {
type: String
},
userProfile: {
type: Object,
observer: '_userProfile'
},
path: {
type: String,
computed: 'firebaseRef(firebaseKey)'
}
},
firebaseRef: function(record) {
var path = this.rootPath + this.uid + '/' + this.firebaseKey;
return path;
},
_userProfile: function() {
if (!this.userProfile) {
console.log('No Document');
return;
}
console.log(this.userProfile);
this.set('userProfile.loginTime', 1);
console.log(this.userProfile);
},
});
</script>
The <firebase-auth>
params
(and options
) attributes are defined as type: Object
, meaning that they're automatically deserialized into Object
s when referenced from JavaScript. The current login()
code attempts to do a JSON.parse(this.params)
, but that shouldn't be done.
Also, there appears to be a timing issue that prevents this.params
from being properly set in the login()
method when auto-login
is used. One workaround is, as with most Polymer timing issues, wrapping the call to this.login()
in a this.async()
.
For example something like:
<firebase-document
location="{{getLocation()}}"
data="{{dinosaurs}}">
with getLocation defined as:
getLocation: function() {
return "https://dinosaur-facts.firebaseio.com/dinosaurs";
}
gives the following:
Looks like an issue in _applyLocalDataChanges since it tries to update the remote doc here even when there is no data or query but not certain how to best address.
I have a collection component that i use to list my products. When i add a new product to the collection i want to notify the user that the product has been added.
In order to do this i was thinking to use the component document and collection together binding on the query object.
For instance when i add the product i get a query object as a result that contains the path of the product just added. I was thinking to set this in the document component in order to retrieve the product just added but it is not working. The query property in the document component is readonly so is not possible to populate it from the outside.
In order to overcome this issue i am getting the path array from the query object and i am populating the location in the document component with it. I am not sure if this is the right way to proceed and i would like to have your opinion.
From @HamzaouiMounir on June 22, 2015 13:36
I want to display an object content(comments) in a post data (using firebase-collection) : Here is the structure of a post in firebase :
"Publication" : {
"date":"22-06-2015",
"content" : "post example",
"comments": {
//a post has too many comments on it
}
}
My goal is to add another dom-repeat to show comments but i cannot see anything. Here is the code example(the first template work correctly as i mentioned)
Copied from original issue: Polymer/polymer#1937
Hi,
I tried using firebase-element with app-router, more- routing and router.js. I get the same error for all of them. If you execute or dispatch the route the 2nd time in the same session the data in HTML does not get rendered.
I tried using iron-list, iron-ajax with template repeat and it works great.
However with firebase-element it does not.
It's a feature request.
It would be grate to have error event when query can't be processed. For example when you try to read data from an URL but you don't have read access to it. The element will only remove an URL value from element's location attribute but will not tell you that it is something wrong. Event handling would be nice to have.
Please explain how to observe
changes on data ?
There is a property named observers
how can I use it?
When I try to use native polymer observers, I do not get indexSplices
object cause as I understand data is not loaded yet..
I have a collection of objects in a firebase db
<template>
<firebase-collection
location="https://incandescent-inferno-8405.firebaseio.com/objects/-JubQT-WrBaVlSeuKJhO"
data="{{object}}"
</firebase-collection>
<paper-input value="{{object.attribute::input}}"></paper-input>
</template>
When I start typing in the input field I get
Uncaught TypeError: Cannot read property '__firebaseKey__' of undefined
Is this a bug or am I doing something wrong?
I've been struggling to get the firebase element working for about 6 months now and I'm still struggling sometimes just writing data to new location or knowing whether to use collection or document it's still confusing. I got Scott miles to help me out at the polymer conference and it seem to be working then and now I'm back home and I still have the same problem. I'm thinking at the moment I should write my JavaScriptAPI from firebase directly and not try to use this element is that right?
It is a very peculiar error, the page does not render the data if you visit it next time, however console.log shows that data is being retrieved.
See SO for detailed explanation:
I am able to successfully log in and get the token back but then when i try to add data i get exception, can you guys help? Below is my code:
<firebase-auth id="fbLogin" provider="anonymous" location="https://xxx.firebaseio.com" user="{{fbUser}}" statusKnown="{{statusKnown}}"></firebase-auth>
<firebase-collection id="fbLanding" location="https://xxx.firebaseio.com/" dataReady="{{userReady}}"></firebase-collection>
<div class="form-section">
<gold-email-input required error-message="Please enter a valid email" label="Email contact" value="{{email}}" name="email" id="email" ></gold-email-input>
<paper-button type="submit" name="submit" raised on-click="buttonClick">Notify Me!</paper-button> </div>
<script>
Polymer({
is: 'landing-page',
ready: function() {
window.addEventListener('offline', function() {
Firebase.goOffline();
});
window.addEventListener('online', function() {
Firebase.goOnline();
});
},
buttonClick: function() {
this.$.fbLogin.login();
this.$.fbLanding.add({
timeStamp:Firebase.ServerValue.TIMESTAMP,
email:this.$.email.value
});
},
listeners: {
'firebase-child-added': 'fireBaseResponse'
},
fireBaseResponse: function(event) {
var sessionId = event.key();
if (!sessionId){
this.$.toast1.text="Ah Oh! something went wrong";
this.$.toast1.toggleClass('errorClass', true);
}
else{
this.$.toast1.toggleClass('errorClass', false);
this.$.toast1.text="Thanks!";
}
this.$.toast1.show();
}
});
</script>
The exception is at
https://github.com/GoogleWebComponents/firebase-element/blob/master/firebase-collection.html#L227
When setting limit-to-last
on firebase-collection
, you'll get the following error on the console:
Uncaught Error: Query.limitToFirst: Limit was already set (by another call to limit, limitToFirst, or limitToLast).
This is because limitToFirst
has a default value of 100 in firebase-collection.html#L133 and will attempt to be set after limitToLast
in _computeQuery
firebase-collection.html#L304
I can appreciate the want to create a sane default, but Firebase doesn't have such a default for on('value')
in their documentation (unless defined by the user in the query).
Hi there
I've build a sample polymer application with the starter kit (V 1.1.0) and pushed it to firebase (https://blazing-heat-376.firebaseapp.com/). Now I wanted to use the firebase element and copied a simple example. Here's my code:
`
<template is="dom-bind">
<firebase-collection location="https://blazing-heat-376.firebaseio.com/"
data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<h4>[[dinosaur.__firebaseKey__]]</h4>
<span>Height: </span><span>[[dinosaur.name]]</span><span>m</span>
</template>
</template>
`
Here's my import in the element.html:
<link rel="import" href="../bower_components/firebase-element/firebase-collection.html">
When I serve the project with 'gulp serve' everything works fine. But when I try to host the app I get the following error: Uncaught SyntaxError: Unexpected token ILLEGAL
When I remove the import, the site is being displayed fine, but I can't make the backend call. I think there is a problem vulcanizing the element...
Hey! :)
I link my polymer to firebase with this :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/firebase-element/firebase-collection.html">
<dom-module id="list-activity">
<template>
<firebase-collection
location="https://glaring-inferno-8584.firebaseio.com/activity"
data="{{activity}}"></firebase-collection>
<template is="dom-repeat" items="[[activity]]" as="a">
<h4>[[a.id]]</h4>
<span>Title: </span><span>[[a.title]]</span>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "list-activity"
});
</script>
Everything works fine at first display. But when I update a entry of firebase it return in Console :
Uncaught TypeError: Cannot read property 'slice' of undefined ____ polymer.html:1727
And nothing is update in my html template. However, when I add an entry in firebase, it add to my template without any errors.
just noticed the function for the last button action is missing on the object prototype, nothing important...
start-at="1"
sets startAt
to "1"
. What should I do to set it to 1
?
There is no documentation for firebase-auth for example, only for firebase-collection:
https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection
The firebase API returns the UID of the newly generated user, but the firebase-auth element does not include the information in the event details. This makes it quite cumbersome to implement a custom registration process.
Audit results here:
[Severe] Controls and media elements should have labels (2)[Warning] Text elements should have a reasonable contrast ratio (4)Not applicable tests (9)Passing tests (4)
One thing I'll mention is that the focus state is really difficult to see on the buttons. The blue focus state on the link and text field is fine, but I'm not able to see it at all on the buttons -- is it actually even going there?
In the example below, computeVal(peeps) is called before the firebase event is logged (as part of element initialisation), and not after - so the only computed value is against the empty list, despite there being a result. Repeated execution reliably gives the same results.
The dom-repeat
works as expected, the dom-if
doesn't.
JSBin demonstrating the problem
Strong suspicion I'm doing something wrong here, but not sure what - I'm not seeing this problem with firebase-document (or with any other computed values I've been using).
I'm not sure how long the example firebase DB will stick around - it was created as part of the firebase tutorial. Here's the console output:
"Adding Firebase event handlers."
"checking..."
[]
"fbase-test Ready"
"Firebase Event: \"child_added\""
[object Object] {
name: "Rick Astley",
text: "It's never going to let me down."
}
null
"Firebase Event: \"value\""
[object Object] {
-ImBnI0WLch7L7ndl6Qd: [object Object] {
name: "Rick Astley",
text: "It's never going to let me down."
}
}
"FIREBASE WARNING: Using an unspecified index. Consider adding \".indexOn\": \"name\" at / to your security rules for better performance "
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.