Render template within template within element?

Help Requests
1

Consider an “Item” custom element which has a couple templates inside …

<template part="group-item" replaceable containerless></template>
...
<template part="option-item" replaceable containerless></template>

… within an outer “DropdownMenu” custom element which renders “Item” elements in a repeat.for …

<item repeat.for="item of items">
	<template replace-part="group-item" containerless>
		<template part="group" replaceable containerless></template>
	</template>

	<template replace-part="option-item" containerless>
		<template part="option" replaceable containerless></template>
	</template>
</item>

… this is finally included in an outer “Filter” view …

<dropdown-menu items.bind="items">
	<template replace-part="group">
		I DA GROUP: ${item.name}
	</template>

	<template replace-part="option">
		I DA OPTION: ${item.name}
	</template>
</dropdown-menu>

This does not seem to render the “group” or “option” templates defined in my view, within the “Item” templates. What ends up being rendered appears to be “nothing”. E.g. the <template part="group"... is rendering nothing (no text, no elements, just blank). Not even the default value is being rendered.

Not sure if this is a workable solution or not, anyone have any thoughts?

1 Like
2

This has been a requested feature for quite sometimes, as you can see from https://github.com/aurelia/templating/issues/625 (and possibly few other issues)

replaceable was designed to handle the scenario that native <slot/> spec doesn’t seem to handle, which is repeat scenario. Currently there is no workaround for it, it’s high in priority list though

3

Thank you. I will check out the issue you linked for more info!

1 Like