Aurelia - Компоненты

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

Простой компонент

Как уже обсуждалось в предыдущей главе, каждый компонент содержит view-model что написано в JavaScript, а также view написано в HTML. Вы можете увидеть следующееview-modelопределение. ЭтоES6 пример, но вы также можете использовать TypeScript.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

Мы можем привязать наши значения к представлению, как показано в следующем примере. ${header}синтаксис свяжет определенный header значение от MyComponent. Та же концепция применяется дляcontent.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

Приведенный выше код даст следующий результат.

Компонентные функции

Если вы хотите обновить верхний и нижний колонтитулы, когда пользователь нажимает кнопку, вы можете использовать следующий пример. На этот раз мы определяемheader а также footer внутри EC6 конструктор класса.

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

Мы можем добавить click.delegate() соединить updateContent()функцию с помощью кнопки. Подробнее об этом в одной из наших последующих глав.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

При нажатии кнопки заголовок и содержимое обновляются.