구성요소에 클라이언트 스크립트 정의 및 바인딩

이벤트를 통해 클라이언트 상태를 업데이트할 수 있도록 클라이언트 스크립트를 추가하고 UI 빌더 편집합니다. 이벤트 핸들러를 사용하여 이러한 스크립트를 모든 구성요소에 바인딩할 수 있습니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

Now 코드 편집기를 사용하여 에서 JavaScript 클라이언트 스크립트를 UI 빌더 생성할 수 있습니다. 그런 다음 클라이언트 스크립트를 이벤트 핸들러 로 추가하여 클라이언트 상태를 업데이트하거나, 페이지의 처리된 이벤트를 내보내거나, 데이터 자원 작업을 실행할 수 있습니다. 예를 들어, 날짜 또는 카운터를 증가시키는 스크립트를 작성하고 단추 클릭과 같은 구성 요소 이벤트에 스크립트를 바인딩할 수 있습니다. Now 코드 편집기에 대한 자세한 내용은 을 참조하십시오 Now 코드 편집기로 코드 편집(고급 기능).

이러한 스크립트를 사용하여 다음 작업을 수행할 수 있습니다.

• 사용 가능한 데이터를 가져오고, 데이터를 조작하고, 클라이언트 상태로 저장합니다.
• 데이터 자원 결과에 액세스합니다.
• 데이터 자원 작업을 실행합니다.
• 이벤트를 디스패치합니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
   자세한 내용은 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 문서를 참조하십시오.
3. 페이지를 열거나 만듭니다.
   에서 UI 빌더페이지를 만드는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 만들기를 참조하십시오.
4. 옵션: 페이지에 구성요소가 없는 경우 페이지에 구성요소를 추가합니다.
   예를 들어 제목 구성요소를 추가할 수 있습니다. 자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
5. 클라이언트 스크립트 옆에 있는 +를 선택합니다.
   
6. 스크립트의 이름을 지정합니다.

   설명이 포함된 이름은 스크립트가 수행하는 작업을 파악하는 데 도움이 됩니다. 또한 나중에 이벤트 처리기에 추가할 때 스크립트를 더 쉽게 찾을 수 있습니다. 다음 예제에서는 간단한 날짜 클라이언트 스크립트를 보여 줍니다.

7. 스크립트를 작성하여 작업을 수행합니다.
   예를 들어, 구성요소에 바인딩하는 간단한 날짜 스크립트를 작성할 수 있습니다.
8. 옵션: 클라이언트 스크립트 기능의 imports 매개변수에 표시되는 스크립트 포함 또는 관련 구성요소를 추가합니다.
9. 페이지에서 스크립트를 바인딩할 구성요소를 선택한 다음 이벤트를 선택합니다.
10. +새 이벤트 처리기 추가를 선택하고, 스크립트에서 만든 스크립트를 선택한 다음, 추가를 선택합니다.

    다음 예제에서는 날짜 클라이언트 스크립트를 보여 줍니다.

    
11. 저장을 선택합니다.
12. 스크립팅된 구성요소를 미리 보려면 .