The TemplateBinding system disallows binding to the tag name for various
reasons. There are several ways to achieve what you are after, and I
believe it's clear we need to make this a bit easier.
For now, you can make a utility method like this:
Polymer.addHTML = function(self, html, target) {
var template = document.createElement('template');
template.innerHTML = html;
var fragment = self.instanceTemplate(template);
if (target) {
target.textContent = '';
target.appendChild(fragment);
}
return fragment;
}
Which can allow you to do something like this:
var html = '<' + tag + ' item="{{item}}"></' + 'tag' + '>';
Polymer.addHTML(this, html, this.$.view);
HTH,
Scott
On Fri, May 16, 2014 at 11:52 AM, Paul Willarson <[email protected]> wrote:
> I'm a former Flex dev, and one of the things I liked about their
> list-based components was the concept of item renderers. In Flex, item
> renderers are components whose job is to visualize data for components such
> as lists, dropdowns, trees, etc.
>
> I am trying to build my own custom tree element in Polymer. So far I've
> successfully created one that properly displays an object tree as a series
> of indented text labels. What I would like is to be able to have an
> attribute on my custom element called itemRenderer that would contain the
> the tag name of different custom element. I've tried several ways to use
> this attribute within the tree's template to create a tag with that name
> with some success. What follows is a simplified form of what I initially
> thought would work...
>
> <template repeat="{{item in items}}">
> <template if="{{itemRenderer}}">
> <{{itemRenderer}} item="{{item}}"></{{itemRenderer}}>
> </template>
> </template>
>
> However the result was the being displayed as text as if the > and <
> entities were used.
>
> I had better success by creating the renderer elements during the domReady
> event and manually putting them with appendChild into a placeholder div.
> One problem with this solution was that when the items array was modifed,
> such as another object being added, the template repeat would create
> another placeholder, but nothing would trigger the creation of the
> additional renderer element. I created an itemsChanged method on my
> element, but quickly realized that it would be a lot of work to determine
> exactly how the array of items had changed.
>
> I've attached a zip of the actual source. It contains all of the Polymer
> code as well. I'm sorry if that isn't the norm; this is my first post
> here. The index.html shows the one instant of the custom element being
> used to display a tree of labels and a second trying to use an item
> renderer.
>
> Thanks for your help.
>
> - Paul
>
> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/983a7adb-7d6e-4c61-a42d-cdbaf5797728%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/983a7adb-7d6e-4c61-a42d-cdbaf5797728%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAHbmOLbTZ8BdKB6vqLD4676G2wn5iSDDpw%2BidQXxoCqBY%3D%2B08Q%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
