Binding/Interpolating HTML In Aurelia

Help Requests
1

I may be confusing binding with dynamic HTML or something else but am trying to the following without success. My view model returns some HTML (effectively a template to display the data) which include a number of values which are to be displayed. There is no problem binding to HTML but cannot interpolate the values within the HTML.

So , for example, " Total Cost: {totalCost} </html>" is bound to the string variable dynamicHtml (in the associated TypeScript file) for want of a better name. What I'm trying to do, which may be the wrong way to go about it, is to display the value of Total Cost from the view model (the variable TotalCost is determined in the associated TypeScript file). However, all that happens is the string "<html>Total Cost: {total Cost} " is displayed. I wish to see something like “Total Cost: £100.00” where 100.00 is the real value in the view model. I’ve seen some examples of dynamic html but cannot get any of them work. Can someone point me in the right direction? Surely this is possible?

Apologies, the editor is stopping me enter the string below
image

2

öhm, yes, that’s basically how it works. though no body? and what’s your view-model there. i’m unsure your your setup as well. maybe just use aurelia-cli to get your ‘hello world’ and go from there

3

I’m using Net Core starting with SPA templates and au new to kick start the project. The Hello World things work fine but I’m doing something bit more complicated getting the data via a service. So you confirm it should work with header and body etc. Thanks

4

header as in <head>? well, that doesn’t seem to be allowed. while one can do <html aurelia-app="main"> <head> and <body> will get stripped.
the usual is <body aurelia-app="main"></body>, meaning your content will be added in the body.

edit:
if you’s using au new, then you’ll have the ‘main.js/ts’ which configures aurelia and the ‘app.js/ts’ and ‘app.html’. in mind, you can rename ‘app’ to ‘body’. so all content from ‘app.html’ and further views will be the body.

5

My view model html file is as follows:

image

and the TypeScript (.ts) file includes the following which calls a service:

image
image.png922×473 20.7 KB

6

i’m officially lost. but anyways, there’s a current dotnet skeleton https://github.com/vuorinem/aspnet-aurelia-webpack-skeleton which might help with the right setup

7

@lvparkington have a look of this :slight_smile:

1 Like
8

Was about to post exactly the same link with @huochunpeng

Here is another relevant StackOverflow question https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia/47644938#47644938

9

This looks interesting. Cheers :slight_smile:

10

Thanks for this. I’ll take a look. Cheers :slight_smile:

11

Thanks for this. I’m looking at some ways forward since more work on Node 10.5. than Node 8.9.4 (was LTS) which we are stuck with for proving concept working. Compile/Run Time errors are critical problems for us. It was bad luck but the default version of npm tended to uninstall packages when making changes such as updates or new installs

12

This looks good since designed as a plugin. However I’ve run into a problem when using as input (I would expect this to work):

image

The HTML is as follows:

image
image.png1076×331 17.8 KB

Oops! I’m not sure why it doesn’t work. Any ideas?

image

13

maybe double check that not one some of the aurelia-modules use binding 1.7 and some others 2.1

14

The expression in your bind command is incorrect. It should be either .bind="property" or =${property}

15

I checked it is using binding 1.2.1 and appears OK in Visual Studio Dependencies. There is only one version of each npm package installed. Cannot really cope with different versions of npm packages in Visual Studio solution. The dynamic-html npm package installed OK and solution builds/starts OK. The problem occurs when attempting to use the view model seems to fail during binding. Correcting the binding expression makes no difference. Do I need to upgrade any of the npm packages to get this working? If so which?

image
image.png951×137 8.84 KB

My package.json file is as follows:

{
“name”: “_Bootstrap”,
“private”: true,
“version”: “0.0.0”,
“devDependencies”: {
“@types/ej.web.all”: “16.1.0”,
“@types/jquery”: “3.3.1”,
“@types/webpack-env”: “1.13.0”,
“aspnet-webpack”: “2.0.1”,
“aurelia-bootstrapper”: “2.0.1”,
“aurelia-fetch-client”: “1.0.1”,
“aurelia-framework”: “1.1.0”,
“aurelia-loader-webpack”: “2.0.0”,
“aurelia-pal”: “1.3.0”,
“aurelia-router”: “1.2.1”,
“aurelia-webpack-plugin”: “2.0.0-rc.2”,
“css-loader”: “0.28.0”,
“extract-text-webpack-plugin”: “2.1.0”,
“file-loader”: “0.11.1”,
“html-loader”: “0.4.5”,
“isomorphic-fetch”: “2.2.1”,
“jquery”: “3.2.1”,
“json-loader”: “0.5.4”,
“style-loader”: “0.16.1”,
“ts-loader”: “2.0.3”,
“typescript”: “2.2.2”,
“url-loader”: “0.5.8”,
“webpack”: “2.3.3”,
“webpack-hot-middleware”: “2.18.0”
},
“dependencies”: {
“aurelia-dialog”: “1.0.0-rc.2.0.0”,
“aurelia-dynamic-html”: “^0.3.1”,
“aurelia-i18n”: “2.1.2”,
“aurelia-syncfusion-bridge”: “3.2.1”,
“aurelia-validation”: “1.1.2”,
“bootstrap”: “4.0.0”,
“i18next-xhr-backend”: “1.5.1”,
“moment”: “^2.22.2”,
“popper.js”: “1.14.1”,
“syncfusion-javascript”: “16.1.26”
},
“scripts”: {
“build”: “webpack --config webpack.config.js”,
“deploy”: “npm run build && gh-pages -d build”,
“start”: “webpack-dev-server”
}
}

16

When you change to

<template>
  <dynamic-html html.bind="_htmlContent"></dynamic-html>
</template>

What error did you get ?

17

I’ve redone this by copying an old node-modules directory into the project, running ‘npm install aurelia-dynamic-html --save’ from non elevated command prompt and found it then worked apart from unexpected 404-file not found errors for the CSS/image files which then needed to put into the Net Core wwwroot folder. I don’t really like having to duplicate files, already located in the right place, there. The view model is now displaying, correctly interpolating data values in the html as shown below :slight_smile:

image