Efficent way to pass large object to an element

[Sergei Mutovkin]

Hello,

I'm trying to figure out what is the recommended way to pass a large JavaScript object to an element. Why?

I follow a pattern presented during Polymer Summit where I perform AJAX request inside a custom element, I receive back an array with large (hundreds) of properties each. To present this data I would like to use dom-repeat over my custom element, i.e. I would like to pass largish "item" to the element without using element parameters.

Thanks in advance.

[Eric Bidelman]

In http://polymer.github.io/polymer/ under dom-repeat, check out initialCount and targetFramerate. These put dom-repeat into a chunked model and can help with performance when rendering large lists.

<template is="dom-repeat" items="[[items]]  initial-count="30" target-framerate="30">

  <my-element foo="[[item]]"> </my-element>

</template>

You're saying you don't want to use data binding  on my-element to set it's foo property? I'd be curious to see your example and if it has performance issues using bindings. Bindings are getters/setters in Polymer.  If anything, the bottleneck may instead be rendering a huge number of items all at once. This is why we have iron-list and dom-repeat in chunked mode.

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/26e1f631-8059-4340-af3f-7cb1fe907fa6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sergei Mutovkin]

Thank you Eric,

it was my understanding from one of the talks that passing data through attributes is a slow process, I've tested and it doesn't look like Polymer tries to serialize my object into a string (at least DOM does not show this), so I assume that it goes through as object directly. 

Thanks a lot for suggesting initial-count and target-framerate.

[Eric Bidelman]

Yep, everything is pass by reference.

Be sure to use reflectToAttribute sparingly on properties, otherwise. You will get objects/arrays serialized to attributes. You almost never want the for those data types.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a02f71f0-9e55-4af5-bd92-3d51c81fa69a%40googlegroups.com.

[Arthur Evans]

Yeah, this is a confusing aspect of the way Polymer uses attributes. We've tried to clarify it in the docs, but it still trips people up sometimes. This example uses an attribute to configure an element with static JSON:

    <x-foo my-prop='[ "one", "two", "three" ]'></x-foo>

Here Polymer is deserializing the string '[ "one", "two", "three" ]' as a JSON array and assigning it to `x-foo`'s `myProp` property.

This uses an attribute to configure a data binding:

    <x-foo my-prop="{{myArray}}"></x-foo>

Here, you're binding `myProp` to the `myArray` property on the host element. No serialization or deserialization. When you need to set an attribute explicitly (for certain native properties, or to set an attribute for styling purposes), you can use the `my-attribute$=` format:

    <x-foo my-attribute$="{{somevalue}}"></x-foo>

You generally don't want to do this for complex values, because Polymer needs to serialize the value (and potentially deserialize it as well, if there's a corresponding `myAttribute` property).

Hope that made sense...

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a02f71f0-9e55-4af5-bd92-3d51c81fa69a%40googlegroups.com.