Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Instantiating different elements within <template repeat> #415

Closed
arodic opened this issue Feb 4, 2014 · 2 comments
Closed

Instantiating different elements within <template repeat> #415

arodic opened this issue Feb 4, 2014 · 2 comments
Labels

Comments

@arodic
Copy link

arodic commented Feb 4, 2014

It there a way to use template repeat to instantiate an arbitrary number of various custom elements based on input data? Here is pseudo-code describing what I'm trying to achieve:

<template repeat="{{node in nodes}}">
  <template if="{{node.type == 'float'}}"><node-float></node-float></template>
  <template if="{{node.type == 'vector'}}"><node-vector></node-vector></template>
  <template if="{{node.type == 'bool'}}"><node-bool></node-bool></template>
  <! -- etc... -->
</template>

I guess something like this could work, but if my data supports up to 1000 different node types, I would need an equal amount of if statements to make it work. Is there a more elegant way of doing this?

Another technique I tried was to make a custom element specifically for instantiating elements of certain type (like some sort of wrapper). The element would use document.CreateElement('node_type') and add it to it's shadowRoot. The problem with this was element.ready() would fire before the element was inserted into the DOM.

@dfreedm
Copy link
Member

dfreedm commented Feb 4, 2014

The attached callback is what you're looking for I think: it is called when a node is inserted into the document.

@arodic
Copy link
Author

arodic commented Feb 4, 2014

Perfect! That would work. Thanks @azakus!

@arodic arodic closed this as completed Feb 4, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants