Aurelia-양식

이 장에서는 Aurelia 프레임 워크에서 양식을 사용하는 방법을 배웁니다.

텍스트 입력

먼저 제출 방법을 살펴 보겠습니다. input형태. 보기에는 사용자 이름과 암호에 대한 두 가지 입력 양식이 있습니다. 우리는 사용할 것입니다value.bind 데이터 바인딩을 위해.

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

가입 기능은 입력에서 사용자 이름과 비밀번호 값을 가져 와서 개발자 콘솔에 기록합니다.

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

체크 박스

다음 예제는 Aurelia 프레임 워크로 체크 박스를 제출하는 방법을 보여줍니다. 하나의 확인란을 만들고checked 뷰 모델에 가치를 부여합니다.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

양식 제출은 checked 콘솔의 값.

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

라디오 버튼

다음 예제는 제출 방법을 보여줍니다. radio buttons. 구문repeat.for = "option of options"객체 배열을 반복하고 각 객체에 대한 라디오 버튼을 만듭니다. 이것은 Aurelia 프레임 워크에서 동적으로 요소를 만드는 깔끔한 방법입니다. 나머지는 이전 예와 동일합니다. 우리는model 그리고 checked 가치.

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

뷰 모델에서 객체 배열을 생성합니다. this.options첫 번째 라디오 버튼이 선택되도록 지정합니다. 다시,SUBMIT 버튼은 라디오 버튼이 체크 된 콘솔에 로그인합니다.

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 
         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

세 번째 라디오 버튼을 확인하고 양식을 제출하면 콘솔에 표시됩니다.