Polymer: changes do not always flow through the filter

Question

I have an array from which I would like to display the top N elements. This array is mutated and sorted by another component in my application.

I see an error, although if I show all the elements of the array, everything is fine. If I react to changing the array by taking a copy of the array with .slice() and placing it in another field and displaying that field filtered for the top elements of N, then all if that is okay. But if I just show the original array filtered through the top N elements, the DOM will never be updated before the changes.

Here's a code shortcut for the error that indicates the problem: http://codepen.io/rictic/pen/ienJK?editors=101

Full code:

 <script src="http://www.polymer-project.org/platform.js"></script><script src="http://www.polymer-project.org/components/web-animations-js/web-animations.js"></script><link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <my-app></my-app> <script>console.clear()</script> <polymer-element name='my-app'> <template> <template if='{{results}}'> r in results <ul> <template repeat='{{ r in results }}'> <li>{{r.value}} - {{r.name}}</li> </template> </ul> r in processedResults | first(5) <ul> <template repeat='{{ r in processedResults | first(5) }}'> <li>{{r.value}} - {{r.name}}</li> </template> </ul> r in results | first(5) <ul> <template repeat='{{ r in results | first(5) }}'> <li>{{r.value}} - {{r.name}}</li> </template> </ul> </template> </template> <script> </script> </polymer-element> <script> 'use strict'; var names = ['Alice', 'Bob', 'Charline', 'Daryl', 'Elise', 'Franz', 'Geraldine', 'Happsburg', 'Irene', 'Jerome']; Polymer('my-app', { results: [{value: 10, name: 'root'}], first: function(a, k) { // A filterer to display the first k elements of an array. if (!a) { return a; } return a.slice(0, k); }, domReady: function() { // Populate the results array. for (var i = 0; i < 10; i++) { this.results.push({value: i, name: names[i]}); } // Once a second, mutate and sort the array setInterval(function() { var randomChoice = Math.round(Math.random() * (this.results.length - 1)); this.results[randomChoice].value *= 2; this.results.sort(function(a, b) { if (a.value != b.value) { return b.value - a.value; } return a.name.localeCompare(b.name); }); }.bind(this), 1000); }, resultsChanged: function() { // Copy this.results into this.processedResults. this.processedResults = this.results.slice(); } }); </script> 

Answer 1

I believe that you can tweak the results in the created callback and everything will work. Here is an example of CodePen . The created callback is part of its own custom elements and runs until ready (which is added by Polymer to know when various functions, such as data binding, are configured and ready for rock). I'm still unclear as to why you should do it this way, so I asked a team member to explain this to me, and I will leave one more comment when I learn more :)

change

After talking with one of the authors of polymer expressions, it sounds as if your source code should have worked, but the filters do not currently restart if the model.results object indicates a mutation. Instead, they are restarted if the path to the object that model.results points to changes. This seems like a lack of filters, and we are studying behavior change, so it works as you expected.