Как объявить интерфейсы, которые используются несколькими моделями просмотров

Question

Я только начинаю с Aurelia & Типичная документация, и я ищу советы по лучшим практикам. Вот базовый код, который в основном описывает список продуктов, разделенных на родительском 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 
     } 
    ]; 
} 

продукт-карточка.html

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

продакт-card.ts

import {bindable} from 'aurelia-framework'; 

export class ProductCard { 
    @bindable product: Product; 
} 

Все эти файлы находятся в том же каталоге и интерфейс Product, который используется в 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

Я предпочитаю называть product-model.ts, но имя есть у вас. Обычно необходимо создать класс обслуживания (например: product-service.js), который будет делать запросы на сервер, а иногда и в какой-либо бизнес-логике, в этом случае вы можете включить модель в этот класс обслуживания.(В машинописном его общий положить больше, что один класс в файле)

Вы можете увидеть больше советов по структуре проекта в этом большом блоге: https://blog.ashleygrant.com/2016/04/19/suggestions-for-structuring-a-large-aurelia-application/

В этом примере вам не нужно создавать ViewModel «продукт-карта .ts ", вы можете создать только представление: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/1

Повторите попытку на свой вопрос. Да, это нормально, поместив модель в отдельный файл и в ту же папку.