3.4 Templates -- Displaying A List of Items(컬렉션 표시)
1. example
대상 집합을 두루 훑어보려면 Handlebars의 {#each}}를 사용하십시오.
<ul>
{{#each people key="id" as |person|}}
<li>Hello, {{person.name}}!</li>
{{/each}}
</ul>위의 예는 다음과 같은 결과를 출력합니다.
<ul>
<li>Hello, Yehuda!</li>
<li>Hello, Tom!</li>
<li>Hello, Trek!</li>
</ul>2. {#each}}는 귀속됩니다.앱에 새 데이터를 추가하거나 삭제하면 코드를 다시 쓰지 않아도 DOM이 업데이트됩니다.
주의[].push () 는 {each}} 를 업데이트하지 않습니다.
여러 항목을 추가하려면 []를 사용해야 합니다.pushObject, 이것은 Ember 변수 그룹의 방법과 관계가 있기 때문에 Ember는 이 변화를 감시할 수 있습니다.
2. Specifying Keys(지정키)
만약 수조가 {{each}}를 사용한다면, 키 옵션은 Ember가 렌더링 사이에 변경된 것을 어떻게 판단하는지 알려주는 데 사용됩니다.
DOM 요소는 Ember가 수조의 동일한 요소를 검사하는 데 도움을 줌으로써 렌더링 속도를 크게 향상시키고 의외의 결과를 방지할 수 있습니다.
예를 들어 {{each}}의 키 설정은 id:handlebars {#eachpeople key='id'as|person|}{{/each}}입니다. 이 {#each}}가 다시 렌더링될 때, Ember는 모든 항목의 id 속성을 바탕으로 이전에 보여준 항목 (정렬로 생성된 DOM 요소) 과 일치합니다.
여기에 특수한 값을 던집니다.
3. Empty Lists(비어 있는 컬렉션)
{{#each}}는 {else}와 일치할 수 있습니다.
example: 집합이 비어 있으면 렌더링됩니다.
{{#each people key="id" as |person|}}
Hello, {{person.name}}!
{{else}}
Sorry, nobody is here.
{{/each}}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
