Improving the interactivity

시작 코드는 매우 기본적인 사용자 환경을 제공합니다. 몇 가지 방법을 통해 사용자 환경을 개선할 수 있습니다.

현재 슬라이드 및 슬라이드의 총 개수를 표시하는 표시기를 추가합니다.
사용자가 다른 셔츠 색상을 선택하면 이미지 캐러셀을 변경하여 선택된 색상의 셔츠 이미지를 표시합니다.

amp-bind 컴포넌트가 도입되기 전에는 이와 같은 기능을 추가할 수 없었습니다. amp-bind를 직접 경험하고 신규 기능을 샘플 코드에 추가해 보겠습니다!

`amp-bind` 컴포넌트 설치

amp-bind는 AMP 데이터 바인딩과 JS와 유사한 표현식을 통해 사용자 지정의 상호작용을 제공하는 컴포넌트입니다. amp-bind를 사용하려면 페이지에 설치해야 합니다.

static/index.html 파일을 열고 다음 스크립트를 페이지 <head> 섹션의 AMP 컴포넌트 목록에 추가합니다.

<script
  async
  custom-element="amp-bind"
  src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>

슬라이드 표시기 추가

amp-bind는 요소 속성을 사용자 지정 표현식에 바인딩하여 작동합니다. 이 표현식은 "상태"(변경 가능한 JSON 데이터)를 참조할 수 있습니다. 이 상태는 amp-bind에 포함된 <amp-state> 컴포넌트를 통해 초기화할 수 있습니다.

슬라이드 상태 초기화

이제 상태 변수를 초기화하여 이미지 캐러셀에 현재 표시된 슬라이드의 색인을 추적해 보겠습니다. static/index.html을 열고 페이지 <body> 상단(<header> 이전)에 다음을 추가하세요.

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

<amp-state> 요소 내의 데이터는 연결된 ID로 액세스할 수 있습니다. 예를 들어 다음 표현식 조각으로 해당 변수를 참조할 수 있습니다.

selected.slide; // Evaluates to 0.

슬라이드 상태 업데이트

다음으로 사용자가 캐러셀의 슬라이드를 변경하는 경우 기존 amp-carousel 요소에 다음의 "on" 작업을 추가하여 이 변수를 업데이트해 보겠습니다.

<amp-carousel
  type="slides"
  layout="fixed-height"
  height="250"
  id="carousel"
  on="slideChange:AMP.setState({selected: {slide: event.index}})"
></amp-carousel>

이제 표시된 amp-carousel 슬라이드가 변경될 때마다 AMP.setState 작업은 다음 인수를 사용하여 호출됩니다.

{
  selected: {
    slide: event.index;
  }
}

event.index 표현식은 새 슬라이드 색인을 평가하고 AMP.setState() 작업으로 이 객체 리터럴이 현재 상태로 병합됩니다. 이렇게 하면 selected.slide의 현재 값이 event.index 값으로 대체됩니다.

도움말 – AMP.setState()는 중첩된 객체 리터럴을 완전히 병합합니다. 자세한 내용은 amp-bind 문서를 참조하세요.

표시기 요소 바인딩

다음으로 현재 표시된 슬라이드를 추적하는 이 상태 변수를 활용하여 슬라이드 표시기를 만들어 보겠습니다. 슬라이드 표시기 요소를 찾고() 다음 바인딩을 하위 요소에 추가합니다.

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class]는 class 속성을 변경하는 바인딩이며 이를 사용하여 모든 요소에 CSS 클래스를 추가하거나 삭제할 수 있습니다.

직접 해보기: 페이지를 새로고침하고 슬라이드를 변경해 보세요.

캐러셀의 슬라이드를 변경하면 다음과 같은 작업이 실행됩니다.

slideChange event를 트리거하며 ...