Aurelia.io의 구성 : 보고서 빌더 생성

이 기사는 재사용 가능한 구성 요소를 사용하여 복잡한 UI를 구축하는 강력한 기능인 Aurelia의 시각적 구성을 탐구합니다. 일반적인 사소한 데모 대신이 기능을 보여주는 보고서 빌더 응용 프로그램을 구축합니다. 실시간 데모 및 소스 코드를 사용할 수 있습니다 (간결하게 생략 된 링크).

주요 개념 :

시각적 구성 : aurelia는 작고 재사용 가능한 하위 뷰를 결합하여 복잡한보기를 구축 할 수 있습니다. 이것은 전통적인 라우팅 기반 구성과 다릅니다 요소 : 이 사용자 정의 요소는 뷰 모델 쌍 임베딩을 모듈성 및 재사용 성을 향상시킵니다.

eventAggregator :

는 단단한 커플 링없이 원활한 구성 요소 통신을 활성화하여 도구 상자 및 보고서와 같은 요소 간의 상호 작용을 용이하게합니다.
• 외부 라이브러리 : Drag-and-Drop 기능을 위해 Sortable.js와 같은 라이브러리를 쉽게 통합하여 Aurelia의 유연성을 보여줍니다. 애니메이션 :
Aurelia의 애니메이션 라이브러리 및 CSS 애니메이션은 시각적 피드백을 제공하여 사용자 경험을 향상시킵니다.
• 플러그인 시스템 : 는 공유 기능을 패키지로 분리하여 재사용 가능한 사용자 정의 코드와 클린 코드베이스를 지원합니다. compose 시각적 구성 이해 :
시각적 구성은 본질적으로 작은 뷰를 더 크고 더 복잡한 것과 결합합니다. 이것은 균질 구성 (동일한 유형의 반복 항목)과 herogeneous
• 구성 (다른 유형의 뷰를 결합) 사이에서 다릅니다. 전통적인 라우팅은 종종 이것을 처리하지만 Aurelia는 요소를 통해보다 유연한 일류 접근 방식을 제공하여 모듈성과 재사용 성을 촉진합니다. 시각적 구성 유형
• Aurelia의 요소를 사용하는 > 요소는 뷰 모델 쌍을 포함시키는 것을 단순화합니다 (보기 및 뷰 모델, 종종 "페이지"라고 함). 속성을 ​​사용하여 View-Model의 파일 이름을 지정합니다. 데이터는
속성을 ​​사용하여 전달 될 수 있습니다. 뷰 모델은 선택적 으로이 데이터를 수신하기위한
• 메소드를 정의 할 수 있으며, 잠재적으로 비동기 작업에 대한 약속을 반환 할 수 있습니다. 또한 속성을 ​​사용하여 대체 뷰를 지정하여 부모 뷰 모델의 속성 또는 하위 뷰 모델 () 내의 함수를 기반으로 뷰를 동적으로 선택할 수 있습니다. 프로젝트 설정 : 보고서 빌더는 Aurelia Skeleton Navigation App (Github Link가 생략)을 기반으로합니다. 라우터가 제거됩니다. 이 앱은 하위 뷰로 구성된 단일 복잡한보기를 사용합니다. 설치 지침은 프로젝트의 readme에서 제공됩니다 보고서보기 구조 :

  는 메인 컨테이너 역할을하여 및

  뷰를 구성합니다. 보고서를 인쇄하거나 지우는 데 사용 가능한 위젯 및 버튼이 표시됩니다. 각 위젯 (예 : , )은 자체 포함 된 구성 요소입니다. 뷰는 균질 한 구성 및 이종 구성을 사용하여 추가 된 위젯을 표시합니다. 보고서 뷰 모델의 함수는 위젯을 제거하는 것입니다. 상호 구성 요소 커뮤니케이션 :

  app.html toolbox는 구성 요소 간의 느슨한 커플 링을 용이하게합니다. Toolbox의 report 버튼은 'ClearReport'이벤트를 게시합니다.이 행사는 보고서 뷰 모델이 가입하고 위젯을 지우는 데 사용합니다. 외부 라이브러리 및 플러그인 : toolbox.html sortable.js (JSPM을 통해 설치)는 드래그 앤 드롭 기능을 처리합니다. Aurelia Animator CSS (JSPM을 통해 설치)는 애니메이션을 제공합니다. 플러그인 시스템을 사용하면 재사용 가능한 사용자 정의 구성 요소 및 기능을 작성할 수 있습니다. logo.html 애니메이션 : textblock.html CSS 애니메이션과 결합 된 뷰의 및 report.html 클래스는 컴포지션 및 위젯 제거 중에 시각적 피드백을 만듭니다. removeWidget 드래그 앤 드롭 구현 :

  sortable.js는

  및 뷰 모델 모두에 사용됩니다. view-model의

  핸들러는 텍스트 블록에 대한 텍스트 입력을 처리하는 보고서에 새 위젯을 추가합니다.

  결론 : EventAggregator Aurelia의 시각적 구성과 및 플러그인 시스템과 결합하여 복잡한 모듈 식 UI를 구축하는 데 강력하고 유연한 접근 방식을 제공합니다. 보고서 빌더 예제는이를 효과적으로 보여줍니다 clearReport (위의 자세한 설명을 감안할 때 크게 중복되기 때문에 자주 묻는 질문 섹션이 간결하게 생략되었습니다.)

위 내용은 Aurelia.io의 구성 : 보고서 빌더 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!