Question

我刚刚开始使用Aurelia＆amp;打字稿，我正在寻找有关最佳实践的建议。以下是基本代码，它基本上描述了分为父products视图的产品列表，其中包含详细的product-card视图：

products.html放在

<template>
    <require from="./product-card"></require>

    // ...

    <div repeat.for="product of products" class="product-cards">
        <product-card product.bind="product"></product-card>
    </div>

    // ...
</template>

products.ts

export class Products {
    public products: Product[] = [
        {
            name: 'Salt',
            price: 10
        },{
            name: 'Orange Juice',
            price: 12
        }
    ];
}

产品card.html

<template>
    Name: ${product.name}
    Price: ${product.price}
</template>

产品card.ts

import {bindable} from 'aurelia-framework';

export class ProductCard {
    @bindable product: Product;
}

所有这些文件都位于同一目录中，而Product＆amp;中使用的product.ts界面product-card.ts就像......一样简单。

export interface Product {
    name: string;
    price: number;
}

这基本上有效，除了products.ts和product-card.ts实际上都不知道上面代码的Product接口。

以下是我如何解决这个问题：

在与所有其他文件相同的文件夹中创建专用定义文件product.d.ts
使用products.ts

product-card.ts

import {Product} from './product';

是否为简单的界面创建一个专用的定义文件，由多个视图模型共享，这些模型被视为良好/最佳实践，还是有其他方法可以解决这个问题？还可以将*.d.ts放在与源相同的文件夹中，还是应该放在其他地方？

Answer 1

Aurelia鼓励使用MVVM（Model-View-ViewModel）设计模式。

products.html是您的观点
products.ts是您的ViewModel
product.d.ts是您的模型，可以包含/使用多个ViewModel

我更喜欢call product-model.ts，但这个名字和你在一起。通常需要创建一个服务类（例如：product-service.js）来向服务器发出请求，有时还需要一些业务逻辑，在这种情况下，您可以将模型包含在此服务类中。（在TypeScript中，它常见的是将一个类放在文件中）

您可以在这个出色的博客中看到有关项目结构的更多提示：https://blog.ashleygrant.com/2016/04/19/suggestions-for-structuring-a-large-aurelia-application/

在此示例中，您不需要创建ViewModel“product-card.ts”，只能创建视图：http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/1

重播您的问题是的，可以将模型放在单独的文件中并放在同一个文件夹中。

如何声明多个视图模型使用的接口

1 个答案: