Cannot find function or filter

[rajasharan]

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>

[gertcuykens]

What happens if you put this in the ready function?

        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]

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]

I not seeing a problem

jsbin example

plunker example

[rajasharan]

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]

lol it even crashed my browser if I click on weekly

[gertcuykens]

@robdodson why is this breaking the internet :P

<paper-slider min="{{type | getMin}}"
                      max="{{type | getMax}}"
                      step="{{type | getStep}}"
                      pin="true">
</paper-slider>

[gertcuykens]

Note that without paper-slider it works

http://jsbin.com/heqidu/1/edit?html,output

[pflannery]

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:

1. ensure the type is set

       Polymer('my-element', {
            type: 'daily', // ensures the type is set
            ready: function() {
                this.type = 'daily';
            }
        });

or 2. handle unknown\undefined types

        PolymerExpressions.prototype.getMin = function(input) {
            if (input === 'daily') return 1;
            else if (input === 'weekly') return 10;
            else return 0;
        };
        PolymerExpressions.prototype.getMax = function(input) {
            if (input === 'daily') return 1000;
            else if (input === 'weekly') return 5000;
            else return 0;
        };
        PolymerExpressions.prototype.getStep = function(input) {
            if (input === 'daily') return 5;
            else if (input === 'weekly') return 50;
            else return 0;
        };

[gertcuykens]

Suggesting to build in undefined fail system in polymer because does bugs are very hard to find!

[rajasharan]

@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]

it fails when we use filter in paper-elements
it looks like external components do not see application filters