aurelia - Process custom elements specified in returned json -

i have custom aurelia can invoked like

test

this works fine using in html page in site.

however, have restful services return html these custom elements. use html content in aurelia site. @ point custom elements won't execute. there way tell aurelia process custom elements in returned html before display ?

thanks

you use combination of <compose> , inlineviewstrategy.

gist demo: https://gist.run/?id=bd1122986ba8dabde8111c3b4ab6df6f

the main idea here have custom component, able use html extracted returned json result. inlineviewstrategy, it's possible full-featured template parser on-the-fly , feed <compose> it. way chunk of html treated other part of application. can contain other custom elements well.

custom element

basically, it's extended <compose>, view bindable property accepts string variable instead of view path.

part.html

<template>   <compose view.bind="viewstrategy" model.bind="model"></compose> </template> 

part.js

import {inject, bindable, inlineviewstrategy} 'aurelia-framework'; import {api} './api'; // rest of 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 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 similar 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 variable

<part view.bind="testview" model.bind="testmodel"></part>

load template url

<part template-href="http://remote-api-url" model.bind="{title: 'another...', content: '...'}"></part>

load template non-existing url

<part template-href="./remote-api-notfound" model.bind="testmodel"></part>

---

i hope helps.