Aurelia：无法识别功能模块

Question

我刚刚发现了这个框架，到目前为止我非常喜欢它。但是后来我尝试创建一个功能模块，但由于某种原因它不起作用。

我使用 CLI 创建了一个新的 Aurelia 应用程序：

au new

然后我开始编码，创建了一个 HTML-only 自定义元素并使用它，效果很好。

当我想创建一个功能模块时，问题就来了。

首先，这是我的 src 文件夹（是的，我要使用经典的待办事项列表应用程序）：

因此，在 main.js 文件中我声明了 todo 功能模块：

import 'regenerator-runtime/runtime';
import * as environment from '../config/environment.json';
import {PLATFORM} from 'aurelia-pal';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('todo/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

现在，根据我的操作，我会遇到一个或另一个错误。

选项 1

如果我将 todo/index.js 配置为这样的模块：

export function configure(config) {
  config.globalResources(['./todo-list', './todo-item']);
}

然后我收到此警告并且网络变为空白：

选项 2

如果我在 todo/index.js 中注释掉 config.globalResources() 行，那么我不会收到警告，该页面似乎可以正常工作。但是当我点击按钮添加一个新的 Todo 项目时，我得到一个错误，提示该函数不存在。

在 app.html 我导入 todo/todo-list.html:

<template>
  <require from="./app-header.html"></require>
  <require from="./todo/todo-list.html"></require>

  <app-header></app-header>

  <main>
    <todo-list></todo-list>
  </main>
</template>

这是todo-list.html的内容：

<template>
  <form>
    <label for="item-text">Añadir elemento: </label>
    <input id="item-text" value.bind="newTodo"/>
    <button type="button" click.trigger="addTodo()">Añadir</button>
  </form>
</template>

这是todo-list.js:

import {TodoItem} from './todo-item';

export class TodoList {
  constructor() {
    this.todos = [];
    this.newTodo = '';
    this.lastId = 0;
  }

  addTodo() {
    this.lastId++;
    this.todos.push(new TodoItem(this.lastId, this.newTodo));
    this.newTodo = '';

    console.log(this.todos.length);
  }
}

所以，我想如果我不将 todo/index.js 配置为模块，Aurelia 就不知道 todo-list.html 和 todo-list.js 是相关的，这就是它找不到的原因函数 addTodo().

我做错了什么？

我创建了一个 github 代码库：https://github.com/dhAlcojor/aurelia-todo-list

Answer 1

您需要在 PLATFORM.moduleName 调用中包装对模块名称（文件）的所有引用。

所以不用

 export function configure(config) {
   config.globalResources(['./todo-list', './todo-item']);
 }

切换到

 export function configure(config) {
   config.globalResources(
     PLATFORM.moduleName('./todo-list'), 
     PLATFORM.moduleName('./todo-item');
 }

另请注意，我不再将路径包装在数组中。该框架会为您做到这一点。

Aurelia：无法识别功能模块

Aurelia: not recognizing feature module

aurelia

选项 1

选项 2