Repository navigation
Cannot find function or filter #1102
Description
Below is a sample my-element which uses use custom filters. The custom filter functionality works but console shows weird errors only on page load.
Till now can't find any faults in the functionality or the GUI behavior,
<!-- Import Polymer -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
<!-- Define your custom element -->
<polymer-element name="my-element">
<template>
<!--
-<style><style>
-->
<paper-radio-group selected="{{type}}">
<paper-radio-button name="daily" label="Daily"></paper-radio-button>
<paper-radio-button name="weekly" label="Weekly"></paper-radio-button>
</paper-radio-group>
<br />
<paper-slider min="{{type | getMin}}"
max="{{type | getMax}}"
step="{{type | getStep}}"
pin="true">
</paper-slider>
</template>
<script>
PolymerExpressions.prototype.getMin = function(input) {
if (input === 'daily') return 1;
else if (input === 'weekly') return 10;
};
PolymerExpressions.prototype.getMax = function(input) {
if (input === 'daily') return 1000;
else if (input === 'weekly') return 5000;
};
PolymerExpressions.prototype.getStep = function(input) {
if (input === 'daily') return 5;
else if (input === 'weekly') return 50;
};
Polymer('my-element', {
ready: function() {
this.type = 'daily';
}
});
</script>
</polymer-element>
Activity
gertcuykens commentedon Jan 18, 2015
What happens if you put this in the
readyfunction?PolymerExpressions.prototype.getMin = function(input) { if (input === 'daily') return 1; else if (input === 'weekly') return 10; }; PolymerExpressions.prototype.getMax = function(input) { if (input === 'daily') return 1000; else if (input === 'weekly') return 5000; }; PolymerExpressions.prototype.getStep = function(input) { if (input === 'daily') return 5; else if (input === 'weekly') return 50; };PS consider making a http://jsbin.com to show case the problem, its easier for amatures like me to answer the question :)
rajasharan commentedon Jan 18, 2015
if I add all those expressions inside ready each error repeats twice on page load.
(sorry still trying to figure out to make polymer work in jsbin)
pflannery commentedon Jan 18, 2015
I not seeing a problem
jsbin example
plunker example
rajasharan commentedon Jan 18, 2015
thanks for the jsbin - I did slight modification (used direct components from polymer website instead of ../bower_components)
live preview link: http://jsbin.com/nonetirovu
If i open the chrome console I see the same errors, do you see in your browser?
gertcuykens commentedon Jan 18, 2015
lol it even crashed my browser if I click on weekly
gertcuykens commentedon Jan 18, 2015
@robdodson why is this breaking the internet :P
gertcuykens commentedon Jan 18, 2015
Note that without paper-slider it works
http://jsbin.com/heqidu/1/edit?html,output
pflannery commentedon Jan 19, 2015
I've realised now that your filters don't return a value when the type is not set or unknown so the filters are being cached as undefined.
I think you have two choices here to fix this:
or 2. handle unknown\undefined types
gertcuykens commentedon Jan 19, 2015
Suggesting to build in
undefinedfail system in polymer because does bugs are very hard to find!rajasharan commentedon Jan 19, 2015
@pflannery - initializing
type: 'daily'did the trick. I also see your point about handling undefined case as well - will do.@gertcuykens - I did notice the "freeze" issue. But now if I use
value="{{value}}"attr for paper-slider it no longer freezes - I guess it needed some variable to bind the value.I think I'll close the issue. Thanks guys.
itsNikolay commentedon Oct 21, 2015
it fails when we use filter in
paper-elementsit looks like external components do not see application filters