Ember의 구성 요소 이해 2

키 포인트

EMBER 구성 요소는 EMBER 애플리케이션의 핵심이며 개발자가 사용자 정의 응용 프로그램 별 HTML 태그를 정의하고 JavaScript를 사용하여 동작을 구현할 수 있습니다. Ember 2.X에서 구성 요소는 뷰와 컨트롤러를 대체합니다. ember 구성 요소에는 핸들 바 템플릿 파일과 일치하는 ember 클래스가 포함되어 있습니다. 이러한 구성 요소는 다른 구성 요소와 함께 사용될 수 있으며 부모 구성 요소에 중첩 될 수도 있으며 기본 HTML 요소와 유사한 속성을 가질 수 있습니다.

동적 데이터는 모델 (응용 프로그램이 사용자에게 제시하는 기본 데이터를 나타내는 객체)을 통해 EMBER 응용 프로그램에 추가 할 수 있습니다. 이를 통해 대화식 및 동적 구성 요소를 생성 할 수 있습니다.

사용자 상호 작용은 작업 (구성 요소 클래스로 전송 된 작업)을 사용하여 구성 요소에 추가 할 수 있습니다. 이러한 동작은 다른 컨텐츠를 표시하는 클릭 가능한 탭과 같은 대화식 요소를 만드는 데 사용될 수 있습니다.
이 기사는 Edwin Reynoso와 Nilson Jacques가 동료 검토했습니다. itepoint의 모든 동료 검토 자 덕분에 itepoint의 내용을 최대한 활용하십시오! 이를 통해 자신의 응용 프로그램 별 HTML 태그를 정의하고 JavaScript를 사용하여 동작을 구현할 수 있습니다. Ember 2.X부터 구성 요소는 뷰 및 컨트롤러 (더 이상 사용되지 않음)를 대체하며 Ember 응용 프로그램을 구축하는 권장 방법입니다.
• Ember의 구성 요소 구현은 가능한 한 W3C 웹 구성 요소 사양을 따릅니다. 브라우저에서 사용자 정의 요소가 널리 사용되면 EMBER 구성 요소를 W3C 표준으로 쉽게 마이그레이션하고 다른 프레임 워크에서 사용할 수있게해야합니다.
라우팅 가능한 구성 요소가 컨트롤러와 뷰를 대체하는 이유에 대해 자세히 알아 보려면 Ember Core 팀원 인 Yehuda Katz와 Tom Dale 의이 짧은 비디오를 확인하십시오.
• 탭 스위처 응용 프로그램
ember 구성 요소에 대한 통찰력을 얻으려면 탭 스위처 위젯을 구축합니다. 여기에는 관련 내용이있는 탭 세트가 포함됩니다. 탭을 클릭하면 해당 탭의 내용이 표시되고 다른 탭의 내용을 숨 깁니다. 충분히 간단합니까? 시작합시다.
• 언제나 그렇듯이 브라우저의 코드를 실험하려면 github 저장소 또는이 Ember Twiddle 의이 자습서 코드를 찾을 수 있습니다.

ember 구성 요소의 구성

ember 구성 요소에는 핸들 바 템플릿 파일과 일치하는 ember 클래스가 포함되어 있습니다. 이 클래스는 구성 요소와의 추가 상호 작용이 필요할 때만 구현해야합니다. 구성 요소는 일반 HTML 태그와 유사한 방식으로 사용됩니다. 탭 스위처 구성 요소를 빌드하면 다음과 같이 사용할 수 있습니다. ember 구성 요소의 템플릿 파일은 앱/템플릿/구성 요소 디렉토리에 있습니다. 클래스 파일은 앱/구성 요소에 있습니다. 우리는 Ember 구성 요소의 이름을 지정하기 위해 단어 사이의 하이픈으로 분리 된 모든 소문자를 사용합니다. 이것은 컨벤션별로 명명되었으며, 이는 미래의 HTML 웹 구성 요소와의 이름 충돌을 피할 수 있습니다.

우리의 주요 ember 구성 요소는 탭 스위치가 될 것입니다. 여러 구성 요소가 있기 때문에 기본 구성 요소에 대해 이야기하고 있습니다. 다른 구성 요소와 함께 구성 요소를 사용할 수 있습니다. 다른 부모 구성 요소에서 구성 요소를 중첩 할 수도 있습니다. 탭 스위치의 경우 아래와 같이 하나 이상의 탭 항목 구성 요소가 있습니다.

보시다시피, 구성 요소는 기본 HTML 요소와 같은 속성을 가질 수 있습니다.

<code>{{tab-switcher}}{{/tab-switcher}}</code>

ember 2.x 프로젝트 생성

이 자습서를 따르려면 Ember 2.X 프로젝트를 만들어야합니다. 이 방법은 다음과 같습니다.

Ember는 NPM을 사용하여 설치됩니다. NPM의 튜토리얼은 여기를 참조하십시오.

이 기사를 작성할 때 버전 1.13 가 소개됩니다.

다음, 새 ember 응용 프로그램을 만듭니다 :

이 디렉토리로 이동하여 bower.json 파일을 편집하여 최신 버전의 Ember, Ember-Data 및 Ember-Load-Initializers를 포함합니다 :

터미널로 돌아가서 실행 :

bower는 ember 버전을 구문 분석하라는 메시지가 표시 될 수 있습니다. 제공된 목록에서 버전 2.1을 선택하고 느낌표로 접두사를 연주하여 해상도를 bower.json으로 유지하십시오.

옆에 Ember Cli의 개발 서버를 시작하십시오 :

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

마지막으로 http : // localhost : 4200/로 이동하고 브라우저 콘솔의 버전을 확인하십시오.

탭 스위처 구성 요소를 만듭니다

<code>npm install -g ember-cli
</code>

ember의 내장 생성기를 사용하여 탭 스위처 구성 요소를 만들자 :

이것은 세 개의 새 파일을 생성합니다. 하나는 HTML 핸들 바 파일 (App/Templates/Components/Tab-Switcher.hbs)이고 두 번째는 구성 요소 클래스 JavaScript 파일 (App/Components/Tab-Switcher.js)이고 마지막은 테스트 파일 (Tests/ 통합/구성 요소/Tab-Switcher-Test.js). 테스트 구성 요소는이 자습서의 범위 내에 있지 않지만 Ember 웹 사이트에서 자세한 내용을 읽을 수 있습니다.

이제 Ember Server를 실행하여 서버를로드하고 http : // localhost : 4200/로 이동하십시오. "Ember에 오신 것을 환영합니다"라는 제목의 환영 메시지가 표시됩니다. 그렇다면 왜 우리 구성 요소가 표시되지 않습니까? 글쎄, 우리는 아직 그것을 사용하지 않았으므로 지금 사용합시다.

<code>ember -v
=> version: 1.13.8
</code>

구성 요소 사용 응용 프로그램 템플릿 앱/템플릿/응용 프로그램을 엽니 다. H2 태그 다음을 추가하여 구성 요소를 사용하십시오.

ember에서 구성 요소는 두 가지 방식으로 사용할 수 있습니다. 인라인 양식

<code>ember new tabswitcher</code>

라고하는 첫 번째 방법은 콘텐츠없이 사용하는 것입니다. 그것이 우리가 여기서하는 일입니다. 두 번째 메소드는 블록 양식

라고하며 핸들 바 템플릿을 구성 요소로 전달하고 {{leattment}} 표현식이 구성 요소 템플릿에 나타나는 템플릿을 렌더링 할 수 있습니다. 이 튜토리얼에서는 인라인 형식을 고수합니다.

그러나 이것은 여전히 ​​화면에 아무것도 표시되지 않습니다. 구성 요소 자체에 표시 할 것이 없기 때문입니다. 구성 요소의 템플릿 파일에 다음 줄을 추가하여이를 변경할 수 있습니다 (App/Templates/Components/Tab-Switcher.hbs) :

<code>{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}
</code>

<code>{{tab-switcher}}{{/tab-switcher}}</code>

이제 페이지가 다시로드되면 (자동으로 발생해야 함) 위에 표시된 텍스트가 표시됩니다. 흥미 진진한 순간!

탭 프로젝트 구성 요소 작성

이제 기본 탭 스위치 구성 요소를 설정 했으므로 탭에 둥지를 틀어 탭 항목 구성 요소를 작성하겠습니다. 다음과 같은 새 탭 항목 구성 요소를 만들 수 있습니다. 이제 새 구성 요소의 핸들 바 파일을 변경합니다 (app/템플릿/구성 요소/tab-item.hbs) :

다음, 기본 탭 스위치 구성 요소의 3 개의 탭 항목을 둥지로써합시다. Tab-Switcher 템플릿 파일 (App/Templates/Components/Tab-Switcher.hbs)을 : 를 변경하십시오

위에서 언급 한 바와 같이, 수율 도우미 함수는 핸들 바 템플릿을 구성 요소로 전달합니다. 그러나 이것은 블록 형식의 탭 스위치를 사용하는 경우에만 유용합니다. 우리는 이것을하지 않았기 때문에 수율 도우미 기능을 완전히 제거 할 수 있습니다.

이제 브라우저를 보면 3 개의 탭 항목 구성 요소가 표시됩니다.이 구성 요소는 모두 "탭 항목 제목"을 표시합니다. 우리의 구성 요소는 이제 매우 정적이므로 동적 데이터를 추가해 봅시다.

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

(나머지는 단락이 컨텐츠 일관성을 유지하고 복제를 피하기 위해 재구성되고 문구를 작성한다는 점을 제외하고는 이전 출력과 유사합니다. 공간을 절약하기 위해 나머지 부분의 출력은 여기에서 반복되지 않습니다.)

<code>npm install -g ember-cli
</code>

위 내용은 Ember의 구성 요소 이해 2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!