使用 Aurelia 动态组合视图

Question

我正在尝试动态组合视图，但在运行时出现错误 Error: Unable to find module with ID: app/components/customers/customer-type-view-converter.html. 我正在使用 webpack。

这是我正在使用的视图转换器

 import {PLATFORM} from 'aurelia-framework';

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

这是调用转换器的模板

<template>

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

        <ux-dialog-header>
            <h1>Create Customer</h1>
        </ux-dialog-header>

        <ux-dialog-body>
            <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>
                        </select>

                    </div>

                </div>

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

            </form>

        </ux-dialog-body>

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

    </ux-dialog>

</template>

Answer 1

这里有两个问题。首先。 class 名称应该是 CustomerTypeViewValueConverter，以便 Aurelia 将其重新定义为不需要视图的特殊 class。

并且在值转换器本身中，html 文件应该以./ 为前缀，以便 webpack 可以找到它们

下面更新了值转换器

 import {PLATFORM } from 'aurelia-framework';

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

使用 Aurelia 动态组合视图

Dynamically composing a view with Aurelia

javascript

webpack

aurelia