Polymer 1.0 dom-repeat does not trigger filter

Question

Have a simple paper-card with an iron-ajax which is being iterated ok but the filter I have made never triggers. The JSON being fetched via the iron-ajax has an integer value for the day of the week and I only want to have the ones with value of 0.

Tried the filter field with following values:

filter="{{isMonday}}"
filter="{{isMonday(item)}}"
filter="isMonday"
filter="isMonday(item)"

All of these with and without the observe

Component code:

<dom-module id="se-ligor">
    <template>
        <template is="dom-bind">
            <iron-ajax auto
                       url="http://localhost:5000/leagues/1"
                       handle-as="json"
                       last-response="{{ajaxResponse}}">
            </iron-ajax>
            <template name="my-paper" is="dom-repeat" items="[[ajaxResponse]]" filter="{{isMonday}}" observe="dayofweek">
                <paper-card heading="[[item.name]]">
                    <div class="card-content">
                        [[item.description]]
                        [[item.dayofweek]]
                    </div>
                    <div class="card-actions">
                        <paper-button>Some action</paper-button>
                    </div>
                </paper-card>

            </template>


        </template>

    </template>
    <script>
    Polymer({
        is: "se-ligor",
        isMonday: function (item) {
            console.log(item.dayofweek);
            if (item.dayofweek == 0)
                return True;
        }
    });
    </script>
</dom-module>

tony19 tony19 · Accepted Answer · 2016-09-25T08:15:51

The dom-bind template is intended for binding only in index.html, not in dom-module, so that template should be removed.

The filter property takes the name of a method without delimiters (i.e., no brackets) on your Polymer constructor object.

<!-- in <dom-module> -->
<template is="dom-repeat" items="[[x]]" filter="isMonday" observe="dayofweek">...</template>

<script>
  Polymer({
    isMonday: function(item) {...}
  });
</script>

isMonday contains a typo in return True. In JavaScript, the keyword is lowercase: true.

plunker demo

Polymer 1.0 dom-repeat does not trigger filter

1 Answers