Skip to content
Aurelia custom element that takes (server- or client side) generated html and compiles it into a fully functional Aurelia View
TypeScript JavaScript
Branch: master
Clone or download
Latest commit e05b31c May 8, 2018

README.md

aurelia-dynamic-html

Aurelia custom element that takes (server- or client side) generated html and compiles it into a fully functional Aurelia View.

View LIVE DEMO

Installation

Install the npm dependency via

npm i aurelia-dynamic-html

or via the Aurelia CLI

au install aurelia-dynamic-html

Aurelia-CLI

For Aurelia-CLI projects based on RequireJS or SystemJS, the following will install and declare the dependency in your aurelia.json:

au install aurelia-dynamic-html

or if you have already installed and only need to add the dependency to aurelia.json:

au import aurelia-dynamic-html

alternatively you can manually add the dependency to your vendor.bundles:

"dependencies": [
  {
    "name": "aurelia-dynamic-html",
    "path": "../node_modules/aurelia-dynamic-html/dist/amd",
    "main": "aurelia-dynamic-html"
  }
]

Configuration

import { Aurelia } from "aurelia-framework";

export function configure(au: Aurelia) {
  au.use.standardConfiguration();

  au.use.plugin("aurelia-dynamic-html"); // don't forget PLATFORM.moduleName if you're using webpack

  au.start().then(() => au.setRoot());
}

Usage

Inline html, implicit $this context

  • Input
export class App {
  message = "Hello world!";
}
<template>
  <dynamic-html html.bind="${message}"></dynamic-html>
</template>
  • Output
<div>Hello world!</div>

Note: the variants below also apply to inline html, but are omitted for brevity

Html variable, implicit $this context

  • Input
export class App {
  message = "Hello world!";
  html = "${message}";
}
<template>
  <dynamic-html html.bind="html"></dynamic-html>
</template>
  • Output
<div>Hello world!</div>

Html variable, explicit $this context

  • Input
export class App {
  message = "Hello world!";
  html = "${message}";
}
<template>
  <dynamic-html html.bind="html" context.bind="$this"></dynamic-html>
</template>
  • Output
<div>Hello world!</div>

Html variable, context variable

  • Input
export class App {
  context = { message: "Hello world!" };
  html = "${message}";
}
<template>
  <dynamic-html html.bind="html" context.bind="context"></dynamic-html>
</template>
  • Output
<div>Hello world!</div>

Html variable, context variable (complex / nested)

The html and context can come from any source, be of arbitrary complexity, and work for any Aurelia feature.

  • Input
export class App {
  context = { message: "Hello world!", html: "${message}" };
  html = "<dynamic-html html.bind=\"context.html\" context.bind=\"context\"></dynamic-html>";
}
<template>
  <dynamic-html html.bind="html" context.bind="$this"></dynamic-html>
</template>
  • Output
<div><dynamic-html html.bind="context.html" context.bind="context">Hello world!</dynamic-html></div>

Erroneous html, do not render errors

  • Input
export class App {
  context = { message: "Hello world!" };
  html = "${message"; // missing closing brace
}
<template>
  <dynamic-html html.bind="html" context.bind="context"></dynamic-html>
</template>
  • Output
<div></div>

Erroneous html, render errors

  • Input
export class App {
  context = { message: "Hello world!" };
  html = "${message"; // missing closing brace
}
<template>
  <dynamic-html html.bind="html" context.bind="context" render-errors=true></dynamic-html>
</template>
  • Output
<div>Parser Error: Missing expected token } (...)</div>

Building The Code

  1. From the project folder, execute the following command:
yarn/npm install
  1. To build the code:
npm run build

Running The Tests

  1. To run the tests
npm run test
  1. To continuously run the tests
npm run develop
You can’t perform that action at this time.