• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Aurelia Dynamic Views From Strings Using InlineViewStrategy

Aurelia 1 · March 17, 2017

The flexibility of Aurelia means there are many ways to achieve a task. The default convention of view/view-model will meet your needs a lot of the time, but sometimes you might need a little more power.

You might already know of the ability to define views inline (inside of your view-models) using the inlineView decorator, allowing you to eschew view HTML files entirely. The InlineViewStrategy class offers similar functionality for a different purpose.

Using the below approach, we can render views dynamically from strings. If your server returns HTML to be rendered for example, then you can take this and use it to create a view.

The first argument of InlineViewstrategy accepts your HTML string, which needs to be wrapped in opening and closing template tags <template></template>. There is an optional second argument where you can pass through one or more dependencies in an array.

import {InlineViewStrategy} from 'aurelia-framework';

export class MyDynamic {
    constructor() {
        this.viewStrategy = null;
        this.someVar = 'a value inside of it.';
    }

    bind(bindingContext, overrideContext) {
        this.viewStrategy = new InlineViewStrategy(`<template>This is my string with ${someVar}</template>`);
    }
}
<template>
    <compose view.bind="viewStrategy"></compose>
</template>

The above code could be modified to allow for the view to be updated after initial rendering, as view.bind will see changes made to the viewStrategy variable and re-render accordingly.

Because we are using <compose></compose> without supplying a view-model, the current view-model will be used as the context, allowing us to just specify our own view and keep everything else as intended.

If you don’t want that <compose> element uglying up your beautiful HTML markup you can use the containerless attribute like this:

<template>
    <compose containerless view.bind="viewStrategy"></compose>
</template>

In many cases, the above is for pretty niche scenarios. There are definitely easier ways to achieve most tasks, with additional power there (as shown above) to take control if you need it.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Paolo Carrasco
Paolo Carrasco
5 years ago

Great! Do we have reference code for this?
I’m looking to create micro frontends (https://www.thoughtworks.com/radar/techniques/micro-frontends) and this is something that would help.

0
TimMc
TimMc
4 years ago

So, could something like this be used to just simply bind a ViewModel to a section of HTML already being output in a CSHTML file (ASP.NET)? I want to completely bypass all “.html” file templates and ONLY use them when necessary (e.g. re-usable components).

0
Dwayne
Dwayne
Author
4 years ago

@TimMc

Terribly sorry about the reply, yes you could absolutely do that. Because we are using the compose element, you can pass in a view-model of your choosing which the HTML is bound to.

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz