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>

버튼을 클릭하면 헤더와 내용이 업데이트됩니다.