Aurelia：无法识别功能模块

Question

我刚刚发现了这个框架，到目前为止我很喜欢它。但是后来我试图创建一个功能模块，由于某种原因它无法正常工作。

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

au new

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

当我想创建功能模块时出现问题。

首先，这是我的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

如果我注释掉config.globalResources()中的todo/index.js行，则我没有收到警告，该页面似乎正常工作。但是，当我单击按钮添加新的待办事项时，出现错误，提示该功能不存在。

在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()的原因。

我在做什么错？

---

我创建了一个代码为https://github.com/dhAlcojor/aurelia-todo-list的github存储库>

我刚刚发现了这个框架，到目前为止我很喜欢它。但是后来我尝试创建功能模块，由于某种原因它无法正常工作。我使用CLI创建了一个新的Aurelia应用程序：au new then ...

Answer 1

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