Removing and adding polymer elements to the DOM

[David Rosendahl]

Hi!

Is the observers in polymer somehow connected to it's place in the DOM?

I'm working on a loooong list with up to 5000 (heavy) polymer elements. As you can imaging it doesn't work good with template repeat method and I had to create a "normal" workaround with polymer elements being reused when scrolling.

I call the instances of the polymer element type used in the list for "renderer"  

the renderer that I'm using in the list have a "data" property that takes an object with everything that should be displayed. So when a renderer  is reused it just moved and the data property set to the new data.

On "dataChanged" I set some observers, but some properties is also binded with {{data.X}} notation in the renderers template.

So back to the problem (this is wrong way of doing it but it did raise the "bug"):

Whenever I scrolled a renderer out of the screen I removed it from DOM and when a new one got visible I added unused (or new) renderers to DOM again. Then I set the renderer.data property.

Hovever, this way, the "dataChanged" event (and bindings) just get fired the first time I set the renderer.data property, not any of the following after a DOM remove/add cycle.

This seems strange to me. Sorry that I don't have an example.

(I did solve it by doing what I should have done from the beginning. Using the css display:none/display:inline-block instead of DOM add/remove)

/David

[Steve Orvell]

We automatically disconnect bindings asynchronously when an element is removed from the dom. This is probably what you were seeing. This is done as a cleanup step. If the element is immediately re-attached to the dom, then the bindings are not disconnected.

There are currently two options for customizing this behavior:

1. Set the 'preventDispose' property of the element to true. This will prevent the bindings from being automatically disconnected.

2. Call 'cancelUnbindAll' when the element is removed from the dom. This will prevent the bindings from being disconnected due to that particular removal.

When managing a reasonable amount of dom like you're doing, preserving bindings like this is no big deal and you can just do it. You generally do not have to manage disconnecting the bindings yourself. However, for completeness, if you do want to disconnect bindings for a particular element, you can call the 'unbindAll' method. There's currently no way to restore bindings after this is done.

Hope that helps.

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...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a4b1bc09-5933-4348-86ef-97291493c327%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Eric Bidelman]

Docs on the dirty details of this:

http://www.polymer-project.org/docs/polymer/polymer.html#bindings

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZg0mdVwdAstbPk0acZ-vBTW75ApCVQHPJ_%2BU5K4Mhe3_g%40mail.gmail.com.

[David Rosendahl]

Ah, that explains a lot!

Thanks!

/David

[san...@sawy.ch]

It's been a while... The 0.5 page you mentioned states:

When you remove an element from the DOM, Polymer asynchronously deactivates its {{}} bindings and*Changed methods. This helps prevent memory leaks, ensuring the element will be garbage collected.

Does this still apply for Polymer 1.0?

Thanks,

Sandro