Process custom elements specified in returned json - aurelia

Question

I have a custom Aurelia that can be invoked like
Test
This works fine using in a html page in the site.
However, I have some restful services that return html with these custom
elements. I then use this html as content in my Aurelia site. At this point the custom elements won't execute. This there a way to tell Aurelia to process the custom elements in the returned html before display ?
Thanks

Answer 1

You could use a combination of <compose> and InlineViewStrategy.
Gist demo: https://gist.run/?id=bd1122986ba8dabde8111c3b4ab6df6f
The main idea here is to have a custom component, which is able to use the html extracted from returned JSON result. With InlineViewStrategy, it's possible to get a full-featured template parser on-the-fly and to feed <compose> with it.
This way that chunk of html will be treated as any other part of the application. It can contain other custom elements as well.
Custom Element
Basically, it's just an extended <compose>, but for view bindable property it accepts a string variable instead of a view path.
part.html
<template>
<compose view.bind="viewStrategy" model.bind="model"></compose>
</template>
part.js
import {inject, bindable, InlineViewStrategy} from 'aurelia-framework';
import {Api} from './api'; // REST of your magic goes here
#inject(Api)
export class Part {
// template string
#bindable view;
// data model
#bindable model;
// rest api url (optional)
#bindable templateHref;
constructor(api) {
this.api = api;
}
// render html template
viewChanged() {
if (this.view) {
this.viewStrategy = new InlineViewStrategy(this.view);
}
}
// load html from remote url (optional feature)
templateHrefChanged() {
if (this.templateHref) {
this.api
.loadTemplate(this.templateHref)
.then(result => {
this.view = result.content;
});
}
}
}
Usage
remote api processing
// api call goes here
// JSON result could be similar to this
result = {
content:
`<template>
<require from="./custom-part"></require>
<h2>${model.title}</h2>
<custom-part title.bind="model.title"></custom-part>
<p>${model.content}</p>
</template>`,
error: false
};
this.testView = result.content;
app.html
Load template string from a variable
<part view.bind="testView" model.bind="testModel"></part>
Load template from an url
<part template-href="http://remote-api-url" model.bind="{title: 'Another...', content: '...'}"></part>
Load template from a non-existing url
<part template-href="./remote-api-notfound" model.bind="testModel"></part>
I hope it helps.