Enhance Aurelia model to handle dynamically loaded HTML - aurelia

Question

I have this view:
<template>
<require from="../customElements/spinner.html"></require>
<div class="sub-submenu-wrapper">
<div show.bind="success">
<div class="sub-submenu-header">
<a href="#/roommanage">
<div class="sub-submenu-header-top">
<i class="fa fa-chevron-left sub-submenu-header-top-icon"></i>
</div>
</a>
<div class="sub-submenu-header-bottom">
<h2>Manage Rooms</h2>
</div>
</div>
<div class="sub-submenu-content">
<div class="managerooms-wrapper">
<table id="tableData" class="stripe row-border cell-border"></table>
</div>
</div>
</div>
<div class="sub-submenu-loading" show.bind="!success">
<spinner></spinner>
</div>
</div>
And here is the model:
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';
import 'isomorphic-fetch';
import {appState} from '../appState';
import 'jquery';
import 'datatables.net';
#inject(HttpClient, Router, appState)
export class ManageRooms{
tableData = [];
success = false;
constructor(http, router, appstate){
this.http = http;
this.router = router;
this.jsonobj = {
'operation':'getrooms'
};
}
attached(){
this.http.fetch('assets/api/api.php', {
method: 'post',
body: JSON.stringify(this.jsonobj)
})
.then(response => response.json())
.then(data => {
if (data.error==='true') {
console.log(data.errortype);
}else {
for(var i = 0; i < data.length; i++){
this.tableData.push(
{
0: "<div>"+data[i].roomno+"</div>",
1: "&nbsp"+data[i].roomtype,
2: "<div>"+(data[i].booked ? 'Yes':'No')+"</div>",
3: "<div class='actionButtonsArea'>"
+"<a href='1'><i class='fa fa-eye fa-bot'></i></a>"
+"<a href='1'><i class='fa fa-edit fa-bot'></i></a>"
+"<a href='3'><i class='fa fa-remove fa-bot'></i></a>"
+"<a href='4'><i class='fa fa-trash-o fa-bot'></i></a>"
+"</div>"
}
);
}
$('#tableData').DataTable({
autoWidth: false,
data: this.tableData,
columns: [
{title: "Room No"},
{title: "Type"},
{title: "Occupied"},
{title: "Action"}
]
}
);
this.success = true;
}
})
.catch(response =>{
});
}
detached(){
$('#tableData').DataTable().destroy("remove");
}
}
In summary, I am making a fetch call, getting some data, making a table from it. What i want is to make the HTML data(i.e. table) that I am inserting bindable or connected to my view model. I found some information about Aurelia's enhancement here: http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/ but i have trouble figuring out how to integrate this with my own code.

Answer 1

Overview
Prerequisite: have some already-working aurelia app
Import the TemplatingEngine
Insert your dynamic html into the DOM (e.g. via .innerHTML)
Call TemplatingEngine.enhance(config) with proper configuration
Details
Prerequisite - Create the skeleton:
au new enhance_test
I'm using the minimal example, using the skeleton provided in Aurelia CLI.
The actual code:
app.html:
<template>
<h1>${message}</h1>
<div id="content-div"></div>
</template>
app.ts:
import {autoinject, TemplatingEngine} from 'aurelia-framework';
#autoinject
export class App {
message = 'Hello World!';
constructor(private _templEngine: TemplatingEngine) { }
attached() {
let contentDivElem = document.getElementById("content-div");
contentDivElem.innerHTML = "<button>TEST ${message}</button>"; //inserting your dynamic HTML
let elemView = this._templEngine.enhance({ element: contentDivElem, bindingContext: this}); //binding the element to the instance of App
}
}