[1.0] dom-repeat observe non-array values

[amannn]

According to the documentation, the observe option for dom-repeat can only react to properties changing on an object in the array that is consumed by the dom-repeat. It would be great if observe can also react to properties from the custom element the dom-repeat lies within.

Let's say I have a dom-repeat that lists employees, I want to use a filter function that reacts to an input field above, by which the employees can be filtered. Now as far as I understand there is no way to tell the dom-repeat to re-render when the data-bound property from the input field changes.

[amannn]

If somebody else has the same issue, a workaround is to call

this.array = this.array.slice();

every time the filter property changes. This way dom-repeat will update.

[kevinpschaaf]

If the sort/filter depends on properties outside the items array, you'll need to observe those properties and call render on the dom-repeat to refresh the sort/filter.

This is covered in the API docs:
https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html#L79

In order to re-run the filter or sort functions based on changes to sub-fields
of items, the observe property may be set as a space-separated list of
item sub-fields that should cause a re-filter/sort when modified. If
the filter or sort function depends on properties not contained in items,
the user should observe changes to those properties and call render to update
the view based on the dependency change.

[amannn]

Thanks, render() works as expected! I really didn't see that in the documentation, since that part isn't on the documentation on the Polymer website yet.

[euclid1990]

@amannn How to call render() manually from below code:

<template id="resultList" is="dom-repeat" items="{{ schedules }}" filter="filterRoom" as="schedule" index-as="scheduleId">
...
</template>

???

[amannn]

You can do something like the following on your Polymer({}) object:

properties: {
    filterRoom: {
        type: String,
        observer: '_filterRoomChanged'
    }
},

_filterRoomChanged: function() {
    this.$.resultList.render();
}

[ebidel]

@amannn The reference docs are up at http://polymer.github.io/polymer/. Change the dropdown to "dom-repeat".

Arguably, these docs aren't very discoverable :(

[euclid1990]

@amannn Thank you 👍

[mazswojejzony]

For some reason none of the above mentioned work-arounds do not work in my case. The only thing which works is this ugly hack:

<template id="optionsList" is="dom-repeat" filter="{{buildFilter(filter)}}" sort="alpha" items="{{items}}">

(...)

refreshOptionsList: function () {
      var items = this.items;
      this.items = [];
      var self = this;
      this.async(function () {
        self.items = items;
      });
    }

[sandro-k]

@mazswojejzony your hack has one problem. If refreshOptionsList is run twice in the same tick before the async function runs, then this.items will be an empty array.

[mazswojejzony]

Yes, that may happen if you call refreshOptionsList very often. That's one of the reasons I call it an ugly hack. ;-)

Too bad it does not work out-of-the-box in 1.0.