Учебники

Аурелия — Компоненты

Январь 1, 2019

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

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

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

app.js 

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

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

app.html 

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

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

Aurelia Компоненты Простой

Функции компонентов

Если вы хотите обновить верхний и нижний колонтитулы, когда пользователь нажимает кнопку, вы можете использовать следующий пример. На этот раз мы определяем верхний и нижний колонтитулы внутри конструктора класса 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>

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

48
Share: