在 Aurelia 中，做类似组件的最佳方法是什么？

Question

假设我们有两个显示相似数据的组件。

UnfilteredList - 调用没有过滤的 API FilteredList - 调用带参数的API来过滤数据

UnfilteredList.html 看起来很像 FilteredList.html UnfilteredList.js 看起来几乎与 FilteredList.js

相同

在我们的路线中，我们定义了两条路线。

            {name: 'UnfilteredList', route: routes.UnfilteredList, isDisabled: false},
            {name: 'FilteredList', route: routes.FilteredList, isDisabled: false},
// More routes here

那么有没有更好的方法来避免重复代码？

编辑：更新

我发现如果你想为两条路线使用相同的 moduleId，你可以。在模块内部，您必须执行导入并添加方法。

import {activationStrategy} from 'aurelia-router';

determineActivationStrategy()
{
    return activationStrategy.invokeLifecycle;
}

然后您可以在激活方法中使用 params 和 routeConfig 参数。每条路线都需要一个唯一的名称，然后您可以关闭该名称来过滤您的数据。

async canActivate(params, routeConfig)
{
    try
    {
        this.name = routeConfig.name;
    }
    catch (error)
    {
        this.errorMessage = error;
    }
}

Answer 1

您可以通过多种方式构建它，但我的方法是定义一个 list 路由，如下所示：

export class App {
    configureRouter(config, router) {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
        { route: ['', 'home'], name: 'home', moduleId: 'index' },
        { route: 'list', name: 'list', moduleId: 'list',  nav: true },
        ]);
    }
}

这将启用类似 http://localhost/list?category=a&country=Australia

的路由

在 list.js 视图模型文件中，您可以访问路由中指定的查询参数：

things.js

import {bindable, inject} from 'aurelia-framework';
import {ThingApi} from '../../services/thing-api';

@inject(ThingApi)
export class List{

    constructor(thingApi){
        this.thingApi = thingApi;
    }

    activate(params, routeConfig) { 
        this.category = params.category;
        this.country = params.country;
        this.loadThings();
    }

    filter(){
        this.loadThings();
    }

    loadThings(){
        this.thigApi.getThings(this.category, this.country).then(things => {
            this.things = things;
        });
    }

}

things.html

<template>
  <input name="category" value.bind="category"></input>
  <input name="country" value.bind="country"></input>
  <button click.delegate="filter()"></button>
  <hr/>
  <table>
    <tr repeat.for="thing of things">
       <td>${thing.category}</td>
       <td>${thing.country}</td>
    </tr>
  </table>
</template>

在 Aurelia 中，做类似组件的最佳方法是什么？

In Aurelia, what is the best way to do similar components?

javascript

aurelia