Aurelia-바인딩 동작

이 장에서는 사용 방법을 배웁니다. behaviors. 바인딩 동작을 바인딩 데이터를 변경하고 다른 형식으로 표시 할 수있는 필터로 생각할 수 있습니다.

조절판

이 동작은 일부 바인딩 업데이트가 발생하는 빈도를 설정하는 데 사용됩니다. 우리는 사용할 수 있습니다throttle입력 뷰 모델 업데이트 속도를 늦 춥니 다. 지난 장의 예를 고려하십시오. 기본 요율은200 ms. 우리는 그것을 다음과 같이 변경할 수 있습니다.2 sec 추가하여 & throttle:2000 우리의 입력에.

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000" />
   <h3>${myData}</h3>
</template>

디 바운스

debounce 거의 같다 throttle. 차이점은 debounce는 사용자가 입력을 중지 한 후 바인딩을 업데이트한다는 것입니다. 다음 예제는 사용자가 2 초 동안 입력을 중지하면 바인딩을 업데이트합니다.

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000" />
   <h3>${myData}</h3>
</template>

한 번

oneTime가장 효율적인 행동 성능입니다. 데이터가 한 번만 바인딩되어야한다는 것을 알고있을 때 항상 사용해야합니다.

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime" />
   <h3>${myData}</h3>
</template>

위의 예는 텍스트를 뷰에 바인딩합니다. 그러나 기본 텍스트를 변경하면 한 번만 바인딩되므로 아무 일도 일어나지 않습니다.