Dynamically composing view


I am trying to dynamically compose a view, but at run time i get the error Error: Unable to find module with ID: app/components/customers/customer-type-view-converter.html. note the addition of .html, when this class has no view.

I’m using webpack.

Here’s the view convertor that i’m using

    import {PLATFORM} from 'aurelia-framework';

export class CustomerTypeViewConverter {
    toView(type: string) {
     return  type  == 'LEGAL' ? PLATFORM.moduleName("createLEGALcustomer.html") : PLATFORM.moduleName("createNATURALcustomer.html")

And here’s the template


    <require from="./customer-type-view-converter"></require>
    <ux-dialog style="min-width:500px">

            <h1>Create Customer</h1>

            <form class="form-horizontal">

                <div class="form-group">

                    <label for="name" class="col-sm-4 control-label">Customer Type:</label>
                    <div class="col-sm-8">
                        <select value.bind="customer.customerType">
                            <option value="NATURAL">Person</option>
                            <option value="LEGAL">Company or Organisation</option>



                <compose view.bind="customer.customerType | customerTypeView"></compose>



            <button click.trigger="controller.cancel()">Cancel</button>
            <button click.trigger="submit()">Ok</button>



require treats your imported resource as a custom element. In order to make it interpret it as a ValueConverter, make sure your classname ends with that. So it would be CustomerTypeViewValueConverter instead of CustomerTypeViewConverter and usage would be ... | customerTypeView

1 Like

Thanks, that worked.

Was also missing ./ before the name of the html files in the convertor