CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0html-rendering
prk68
prk68

Reputation: 176

Polymer JS: Does prepending an item to an Array property re-render the whole UI?

I have a component with following template markup inside it

<template is="dom-repeat" items="{{values}}">
    <div><span>{{item.msg}}</span></div>
</template>

This component has a property values which is an Array of objects.

Now I want to prepend item to this array property in response to an event. Does polymer rerender this complete UI throwing away the existing DOM elements, because all the existing elements will pushed down by an index of 1 ? If so, what are optimizations I can implements to avoid DOM rerendering which can be expensive when the Array grows big.

Upvotes: 0

Views: 140

Answers (1)

User 28
User 28

Reputation: 5158

Short answer is no.

It's not about Polymer, it's about dom-repeat.

About dom-repeat behavior, you can see from github.

In simple words for every render

  • Create index array to apply sort and filter function

  • Loop through the array of instance (an object from templatize function), assign an item to it if already exist (from previous render)

  • If not, create a new one, push to array and insert to parent node.

  • If it has exceeded instances, remove it.

See __applyFullRefresh.

So yes it reuse existing DOM elements.

As I said this is about dom-repeat. You should see iron-list which do similar thing with better performance or create by yourself in the way you want.

Upvotes: 3

Related Questions