Creating an Aurelia Dialog without a Template HTML File

How to use Aurelia Dialog without having to create a template HTML file.

Tuesday May 31, 2016 - Permalink - Categories: aurelia, javascript

In a recent project I wanted to be able to use Aurelia Dialog to create . The dialog/popups needed a slightly different input and I didn't want to create a bunch of HTML template files.

Instead I decided to create one class where I could pass my HTML in model along with any bindings I needed.

First we create a new component which we will use as our viewModel for DialogService. This component will hold the model, view and controller.

We import DialogController from the Aurelia Dialog module. We also import noView (because we don't have a HTML file).

InlineViewStrategy will allow our component to author the inline HTML (the view). What's great about this is we can set the HTML to a variable and have our HTML be exactly like what we would put in our HTML template file. 

import { DialogController } from 'aurelia-dialog';
import { inject, noView, bindable, InlineViewStrategy } from 'aurelia-framework';

@noView
@inject(DialogController)
export class CustomDialog {
    controller: DialogController;
    model: any;
    
    constructor(controller) {
        this.controller = controller
    }
}

In order to author the inline HTML we use this function:

getViewStrategy()

Using activate(model) allows us to pass the model through Aurelia's DialogService.

We return a new InlineViewStrategy with our inline HTML. Our component now looks like:

export class CustomDialog {
    controller: DialogController;
    model: any;
                
    constructor(controller) {
        this.controller = controller
    }
    activate(model) {
        this.model = model
    }
    getViewStratergy() {
        return new InlineViewStrategy(this.model.html) //requires <template></template> tags
    }

Don't forget that we still need to include the template tags.

Now we're ready to use this with the DialogService class. Here's an example on how to use it:


import { DialogService, } from 'aurelia-dialog';
import { inject, bindable } from 'aurelia-framework';
import { CustomDialog } from './../../tools/dialog'

export class Users {
    @bindable users;
    dialogService: DialogService
    constructor(dialogService: DialogService) {
        this.dialogService = dialogService
    }
    
    ...
    
    deleteUser(user) {
        let model = {
            title: 'Delete User?',
            cancel: 'Cancel',
            ok: 'Delete',
            html: `<template>
                    <h3>\${model.title}</h3>
                    <button click.trigger="controller.cancel">\${model.cancel}</button>
                    <button click.trigger="controller.ok()">\${model.ok}</button>
                  </template>`
        }
        //in webpack using the viewModel class isn't working at the time of this post. If you aren't using webpack you can simply use:
        //this.dialogService.open({ viewModel: CustomDialog, model: model}).then(response => {
        this.dialogService.open({ viewModel: 'tools/dialog', model: model}).then(response => {
            if (!response.wasCancelled) { ... }
            else { ... }
        
        });
        
    }
    
}

If you need to pass back information from the dialog you can do so this way:

<button click.trigger="controller.ok(model.data)">\${model.ok}</button>

That's all for now!

comments powered by Disqus