Dom-Repeat Render: What is it actually do ?

[Quang Le]

I was fighting with a nested dom-repeat for the last 2 days.

I somewhat now know how to re-render when sub-properties changed.

But still don't understand the purpose of the render function.

I changed the data binded to a dom-repeat, and call the render, but nothing happens.

See here

http://plnkr.co/edit/Y0P5vNxg46t5fX7gJFxU?p=preview

Could somebody explain to me please?

If you could take a look of my example, to see if I do it the right away.

What could be other ways/proper way to re-render item inside a dom-repeat when the data that binded to it was changed outside.

Thank you

[Karl Tiedt]

Because you are by passing the binding functionality of Polymer for Objects and Arrays... Because Polymer does not use mutation observers due to performance issues Objects and Arrays have to be notified of changes, this is done by using this.set as described very clearly in the documentation. The below method with the single line, is enough to get what you expected.

// call dom-repeat render

_renderDREmployees: function() {

      this.set('employees.0.name',"RENDERED");

},

-Karl Tiedt

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/79cb695c-65cb-4794-80c4-292471cca595%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Quang Le]

Thank you

I did know how to make the change as you suggested (if you look at my whole code)

I just want more detail on what the render function actually does, in order to use it properly.

[Arthur Evans]

This section describes the use cases for render:

https://www.polymer-project.org/1.0/docs/devguide/templates#synchronous-renders

Most common use case is probably re-running the sort and/or filter functions when an external piece of data changes. But there are a couple of other uses, like unit testing.

Another example is in the iron-doc-viewer element that displays Polymer API docs. It has a set of dom-repeats that render properties, methods, and events. When you follow a direct link to an API page, like: 

https://www.polymer-project.org/1.0/docs/api/dom-repeat#method-render

It needs to make sure those repeats are all rendered before it tries to scroll to the chosen anchor. (It actually uses Polymer.dom.flush()  in this case, but it has the same effect, which ensuring that the templates have rendered.)

So, in summary:

• It doesn't do anything to change the dom-repeat's view of the data. If you want to notify the dom-repeat that some arbitrary data in your array has changed, your best bet is to do a shallow clone of the array: this.myArray = this.myArray.slice();
  
• It does ensure that rendering is done by the time it returns, which can be useful for unit testing, or scrolling to an element generated by the dom-repeat.
• It forces the dom-repeat to re-run its sort and filter functions, even if it doesn't appear that anything has changed. 

Hope that helps.

Arthur

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/98c66ef0-90af-4d85-8cd0-6f53b06c8f4e%40googlegroups.com.