Dynamically polymer element instances and custom attributes

[Paul Hodges IV]

HI!  I've created a <custom-pager> element which dynamically creates polymer-element instances on the fly (instead of having to preload elements.)  Ex (note, this is concept only, probably has bugs):

<polymer-element name="my-page1" attributes="attr1" noscript>
<template>
Page1 {{attr1}}
</template>
</polymer-element>

<polymer-element name="my-page2" attributes="attr2" noscript>
<template>
Page 2 {{attr2}}
</template>
</polymer-element>


<polymer-element name="custom-pager">
<template></template>
<script>
Polymer({
 changePage(elementname, attrs) {
  //...other code
  var div = document.createElement('div');
  div.innerHTML = '<' + elementname + '></' + elementname + '>';
  for(var k in attrs) {
   div.children[0][k] = attrs[k];
  }
  this.appendChild(div);
 }
});
</script>
</polymer-element>


<custom-pager></custom-pager>
<script>
window.addEventListener('polymer-ready', function() {
 document.querySelector('custom-pager').changePage('my-page1', {attr1: '{{boundvarfromelsewheredotcom}}'});
});
</script>

The issue is, i dont know which attributes the developer, using my custom-pager, needs to be passed + bound into the page "my-page1".  

Question is, is there a way to have custom-pager automagically bind to all attributes so that they can be passed on to the pages (so one could specify <custom-pager attr1="{{attr1value}}" attr2="{{attr2value}}"/> )?  Or is there a way to publish the attribute (per element instance, not prototype) on-the-fly (which would look like <custom-pager attr1="{{attr1value}}" attr2="{{attr2value}}" bindToAttributes="attr1 attr2"/> )?

Thanks peeps!

p4

[Scott Miles]

It's not entirely clear what kind of stuff you want to pass in via `attrs`. Live code will help us figure out the details of your use case, so below is just a starting place.

As described, you can only pass in static data anyway, so I would start like so:

http://jsbin.com/kibife/2/edit

<polymer-element name="custom-pager">

<!-- for simplicity, let's leave out the template for now -->

<script>

Polymer({

  changePage: function(elementname, attrs) {

    var page = document.createElement(elementname);

    for (var k in attrs) {

      page.setAttribute(k, attrs[k]);

    }

    // discard old page

    this.textContent = '';

    this.appendChild(page);

  }

});

</script>

</polymer-element>

<script>

  addEventListener('polymer-ready', function() {

    document.querySelector('custom-pager').changePage('my-page1', {attr1: 'boundvarfromelsewheredotcom'});

  });

</script>

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/c649f93b-e859-4c07-8735-1c89c6fc0882%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Paul Hodges IV]

Hopefully this explains it a little better: http://jsbin.com/mikexeluwixe/1/edit

[Scott Miles]

We still haven't covered the key question, which is whether the values you are sending in to the pager really need to be _bound_ (that is dynamic) or whether they just need to be sent in one time. If you don't need them to be fully dynamic, it's all pretty easy:

http://jsbin.com/hoteba/2/edit

Minor notes:

- this.textContent = '' is a simpler way of removing all the children than your while loop, you certainly don't need both

- the bindings you have to custom-pager in your example don't do anything, I removed them for clarity 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/fb3c9645-9fcb-434a-9057-72ac68aca53b%40googlegroups.com.

[Paul Hodges IV]

They need to be bound as they can change (I thought I had specified that in the OP.)  Id like to keep the custom-pager generic and not have to extend it every time i want to pass around bound attributes/properties

On Friday, September 5, 2014 2:49:27 PM UTC-4, Scott Miles wrote:

We still haven't covered the key question, which is whether the values you are sending in to the pager really need to be _bound_ (that is dynamic) or whether they just need to be sent in one time. If you don't need them to be fully dynamic, it's all pretty easy:

http://jsbin.com/hoteba/2/edit

Minor notes:

- this.textContent = '' is a simpler way of removing all the children than your while loop, you certainly don't need both

- the bindings you have to custom-pager in your example don't do anything, I removed them for clarity 

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

[Scott Miles]

I'm still not sure we are talking about the same thing. For sure you intend that some time *after* a user has selected a page, you want to be able to, e.g.  change `example-pager-guy.sharedpageattr` and have the page automatically update?

>> Id like to keep the custom-pager generic and not have to extend it every time i want to pass around bound attributes/properties

Sure, but that doesn't have anything to do with the question of dynamics that I'm getting at.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8dfb2d6e-ec29-4a6a-a269-552b8b3bf8b0%40googlegroups.com.

[Paul Hodges IV]

Yes .. It is a requirement that the page gets the updated attribute immediately .. here is an example of one possibility:

http://jsbin.com/yevezidiqalu/1/edit

And yes, I understand each page can have its own core-media-query to do the same thing, but thats not the point here .. 

Thanks for taking the time to dig through this with me :)

[Scott Miles]

Do 'pageAttr1', etc. also need to be fully dynamic, or only the shared data?

>> And yes, I understand each page can have its own core-media-query to do the same thing, but thats not the point here .. 

Sure, I'm not trying to tell you you want the wrong thing, I'm only trying to understand what you want, to make sure the solution isn't more complicated than it needs to be.

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/18ea0636-588e-45be-b078-8948ad1aebcf%40googlegroups.com.

[Paul Hodges IV]

They all need to be dynamic .. Im not concerned with a complicated solution ;p My current path was already pretty spaghetti ..  Ive been digging through polymer-dev and node.bind trying to mimic the attribute publishing that happens when the element is registered .. Ive spent far too much time on it already .. I was hoping somebody knew how to accomplish this

One idea was to bind to calls to setAttribute on custom-pager, then put a path observer on the attribute name and just bind it all together myself with some messy ass glue :)  But since poly is already doing this, I was hoping to leverage it

[Scott Miles]

>> Im not concerned with a complicated solution ;p

Yes, but I am. 

Here's a way to get what you want:

http://jsbin.com/hifese/2/edit

Let me know if you have any questions about what's in there.

Scott

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/020d2022-b360-496e-a74f-276d8110f446%40googlegroups.com.

[Paul Hodges IV]

Thanks for your help .. injectBoundHTML was one of the missing pieces I was looking for ..