퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 스크립팅과 데이터
  4. 반복[Each]

반복[Each]

Each 클래스

각 아이템에 대해 지정된 템플릿을 사용하여 객체 모음을 표시합니다.

Each 태그의 자식 요소는 Items 속성에 지정된 컬렉션의 각 아이템에 대해 “projected[투영]”될 템플릿을 나타냅니다. 그러면 투영된 아이템이 해당 인스턴스의 데이터 컨텍스트가 되므로 컬렉션을 명시적으로 인덱싱하지 않고 아이템 자체를 기준으로 데이터 바인딩을 지정할 수 있습니다.

Each에 의해 투영된 각 하위 트리는 자체 범위내에 존재합니다. 즉, Each의 자식은 그 외부에서 액세스할 수 없습니다. 그러나 내부에서 선언된 외부 노드에는 액세스 할 수 있습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<JavaScript>
    module.exports = {
        items: [
            { name: "Jake", age: 24 },
            { name: "Julie", age: 25 },
            { name: "Jerard", age: 26 }
        ]
    };
</JavaScript>
<StackPanel>
    <Each Items="{items}">
        <StackPanel>
            <Text Value="{name}" />
            <Text Value="{age}" />
        </StackPanel>
    </Each>
</StackPanel>

ux:Template으로 Each 사용하기

사용자 정의 컴포넌트에서 Each를 사용하는 경우 Each가 사용하는 기본 템플릿 대신 사용할 수 있는 사용자 정의 템플릿 오브젝트를 사용할 수 있으므로 해당 컴포넌트의 가용성을 높일 수 있습니다. 이렇게 하려면 두 가지 작업을 수행해야 합니다.

  • TemplateSource 속성에 템플릿을받을 수있는 요소를 지정합니다 (사용자 지정 구성 요소의 경우 사용자 지정 구성 요소의 클래스)
  • TemplateKey 속성을 사용하여 Each가 찾고자 하는 템플릿 이름을 지정하십시오.

템플릿을 지정하지 않으면 Each의 자식 요소가 de-facto 템플릿으로 사용됩니다.

예제

다음 예제는 Each가 사용할 사용자 정의 템플릿을 클래스에 전달하는 방법을 보여줍니다.

1
2
3
4
5
6
7
8
<StackPanel ux:Class="CoolRepeater" Background="#FAD">
    <Each TemplateSource="this" TemplateKey="Item" Count="20">
        <Text>No template is given</Text>
    </Each>
</StackPanel>
<CoolRepeater>
    <Text ux:Template="Item">Hello, world!</Text>
</CoolRepeater>

사용자 정의 템플릿인 “Hello, world!” 텍스트를 제거하는 경우, Each는 자식을 템플릿으로 사용하도록 되돌아갑니다.

Each의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/reactive/each#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?