Taken in part from discussions/solutions mentioned [here]this aurelia/templating#35)
Please also look at view-manager and aurelia-form for inspiration. Maybe also look here for example of dynamic data grid with rows and columns :)
Notes: This works for me as well. I only had to change view.bind(this.bindingContext);
to view.bind(this);
as I wanted to bind to the model itself (not its parent) and initially failed on using click delegates.
Alternative!?
For this I use <compose>
and InlineViewStrategy
- just binding an InlineViewStrategy
instance to the view property of <compose>
.
<template>
<compose view.bind="viewStrategy"></compose>
</template>
export class DynamicCustomElement {
viewStrategy: InlineViewStrategy;
...
bind(bindingContext: any, overrideContext: any) {
...
this.viewStrategy = new InlineViewStrategy(`<template><${editorName} data.bind="data"></${editorName}></template>`, [dep1, dep2, ...]);
...
}
...
}