Using binding to vary tag names within a template

[Paul Willarson]

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 &gt; and &lt; 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

[Scott Miles]

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 

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/983a7adb-7d6e-4c61-a42d-cdbaf5797728%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.