Polymer 1.0 - Issue selecting dynamic element by id

Question

I am trying to select an element by id that was created dynamically:

<dom-module id="filter-box">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <h4 id="title">{{title}}</h4>

    <paper-checkbox id="test">test</paper-checkbox><br>

    <template is="dom-repeat" items="{{filters}}">
      <paper-checkbox id="{{item}}">{{item}}</paper-checkbox><br>
    </template>

  </template>
</dom-module>
<script>
  (function () {
    Polymer({
      is: 'filter-box',
      properties: {
        filters: {
          type: Array,
          notify: true,
        },
        title: {
          type: String
        }
      },
      ready: function() {
        this.filters = [
          'Commercial',
          'Enterprise'
        ];
      },
      isSelected: function(filter) {
        return this.$$[filter].checked;
      }
    });
  })();
</script>

When isSelected("something") is called I get:

"Uncaught TypeError: Cannot read property 'checked' of undefined"

I can select the title via this.$.title, however I can not select the dynamic elements this way or using this.$$ as suggested here.

Answer 1

According the reference you provided you are supposed to call this.$$(selector) with parentheses as in a function call (and not with brackets). So replace your code with this:

return this.$$('#'+filter).checked;

Note that you may also need to prepend the id selector with #.