I have a recursive object in my Aurelia view model that looks like this:
Class BottomlessPit {
Name: string = \'\';
OK this hurt my head a little bit but here's a way to enable defining inline html-only custom elements...
https://gist.run?id=11ac077048cab0ad9979
app.html
Aurelia - Inline Custom Elements
${person.name}
${message}
app.js
export class App {
kid = {
name: 'North West',
parents: [
{
name: 'Kanye West',
parents: []
},
{
name: 'Kim Karsomething',
parents: []
}
]
};
}
main.js
import {relativeToFile} from 'aurelia-path';
import {Origin} from 'aurelia-metadata';
import {TemplateRegistryEntry, TemplateDependency} from 'aurelia-loader';
// override the TemplateRegistryEntry's "template" property, adding
// logic to process inline custom elements (eg )
let templateDescriptor = Object.getOwnPropertyDescriptor(TemplateRegistryEntry.prototype, 'template');
Object.defineProperty(TemplateRegistryEntry.prototype, 'standardTemplate', templateDescriptor);
Object.defineProperty(TemplateRegistryEntry.prototype, 'template', {
get: function get() {
return this.standardTemplate;
},
set: function set(value) {
// hand off to the standard template property...
this.standardTemplate = value;
let address = this.address;
// loop through each of the inline custom elements and register
// them as dependencies.
let namedTemplates = value.content.querySelectorAll('template[name]:not([name=""])');
for (var i = 0, ii = namedTemplates.length; i < ii; ++i) {
let current = namedTemplates[i];
let name = current.getAttribute('name');
let id = relativeToFile(`./${name}.html`, address); // potential for collision but putting in subfolder would be weird if the inline element had it's own elements
// give the loader the template html
System.set(
id + '!' + System.normalizeSync('text'),
System.newModule({ __useDefault: true, default: current.outerHTML}));
// register the dependency
this.dependencies.push(new TemplateDependency(id, name));
// remove the inline template element from the template
current.parentNode.removeChild(current);
}
}
});
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot());
}