firebase-element
firebase-element copied to clipboard
GoogleWebComponents
firebase-collection does not work within restamped conditional template
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...
