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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 스크립팅과 데이터
  4. 데이터바인딩[DataBinding]

데이터바인딩[DataBinding]

DataBinding 클래스

데이터 바인딩을 사용하면 UX 마크업 객체의 속성을 JavaScript 또는 기타 데이터 컨텍스트에서 가져온 값에 바인딩 할 수 있습니다.

데이터 바인딩은 {key} 구문을 사용하여 UX 마크업에서 가장 쉽게 표현됩니다. 여기서 key는 바인딩 경로입니다:

1
<Text Value="{textKey}" />

데이터 바인딩은 명시적으로 선언할 수도 있습니다. 명시적 데이터 바인딩을 사용하면 데이터 바인딩이 해결되기 전에 사용되는 기본값을 지정할 수 있습니다:

1
2
<Panel ux:Name="panel1" Width="100" />
<DataBinding Target="panel1.Width" Key="panelWidth" />

위 코드는 panelWidth 데이터가 해석될 때까지 panel1.Width의 기본값으로 100을 사용합니다.

DataBinding의 인터페이스

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

비고

DataBinding

퓨즈는 직접 바인딩, 반복 및 분기를 통해 UX 태그로 데이터 기반 앱을 만드는 최상의 방법을 제공합니다. UX는 또한 복잡한 데이터 구조 내부의 깊은 참조를 할 수 있으므로 코드에서 지루한 데이터 메시징을 할 필요가 없습니다.

DataContext

퓨즈 노드 트리의 어느 지점에나 데이터 컨텍스트가 있습니다. 모든 노드의 데이터 바인딩은 노드의 현재 데이터 컨텍스트에 상대적입니다. 기본적으로 이 데이터 컨텍스트는 null이며 모든 데이터 바인딩은 null 또는 빈 값만 반환합니다. 컨텍스트는 또한 트리 아래로 전달됩니다. 즉, 자식 노드가 데이터 컨텍스트를 제공하지 않으면 부모 노드의 데이터 컨텍스트를 사용합니다.

데이터 컨텍스트를 설정하려면 일반적으로 와 같은 데이터 컨텍스트를 제공하는 노드에 비헤이비어를 추가합니다.

데이터 소스로서의 JavaScript 모듈

데이터 소스를 만드는 가장 간단한 방법은 JavaScript를 사용하는 것입니다. 데이터 브라우저의 “Hello World” 최소 예제가 있습니다:

1
2
3
4
5
6
7
8
<App>
    <JavaScript>
        module.exports = {
            greeting: "Hello databound world!"
        };
    </JavaScript>
    <Text Value="{greeting}" />
</App>

마찬가지로 컬렉션에 바인딩 할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<App>
    <JavaScript>
        var data = ["1", "2", "3"];

        module.exports = {
            data: data
        };
    </JavaScript>
    <StackPanel>
        <Each Items="{data}">
            <Text Value="{}" />
        </Each>
    </StackPanel>
</App>

이것은 예측 가능하게 텍스트 문자열 1, 2, 3을 나열합니다. Text Value {}를 바인딩하면 이 데이터 컨텍스트를 의미합니다. 일반적으로 더 복잡한 데이터 소스에 바인딩하므로 각 요소는 바인딩 할 흥미로운 것을 갖게 됩니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var data = Observable(
            {name: "Hubert Cumberdale", age: 12},
            {name: "Marjory Stewart-Baxter", age: 43},
            {name: "Jeremy Fisher", age: 25});

        module.exports = {
            data: data
        };
    </JavaScript>
    <StackPanel>
        <Each Items="{data}">
            <DockPanel>
                <Text Dock="Right" Value="{age}" />
                <Text Value="{name}" />
            </DockPanel>
        </Each>
    </StackPanel>
</App>

이 경우 데이터 소스 Observable을 만들었습니다. 이는 런타임시 데이터 소스에 대한 변경 사항 전파를 지원함을 의미합니다. 이 경우 컬렉션 자체는 Observable이지만 아이템은 그렇지 않습니다. 자식에 바인딩 할 수 있지만 변경하려는 경우 이러한 변경 사항은 UI에 반영되지 않습니다. 자식이 UI에 변경 사항을 전파하도록 하려면 Observable로 변경해야 합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<JavaScript>
    var Observable = require("FuseJS/Observable");
    var data = Observable(
        { name: Observable("Hubert") },
        { name: Observable("Marjory") });
    module.exports = {
        data: data
    };
</JavaScript>
<StackPanel>
    <Each Items="{data}">
        <Text Value="{name}" />
    </Each>
</StackPanel>

다음 경로에 바인딩 할 수도 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
<JavaScript>
    var complex = {
        user: {
            userinfo: {
                name: "Bob"
            }
        }
    };
    module.exports = {
        complex: complex
    };
</JavaScript>
<Text Value="{complex.user.userinfo.name}" />

이는 REST 서비스에서 JSON으로 반환되는 데이터 소스와 같은 임의의 데이터 소스에 바인딩 할 때 매우 유용합니다. 코드에서 먼저 데이터를 처리하지 않고 복잡한 데이터에 직접 바인딩 할 수 있기 때문입니다. 이 심층적인 예제를 참조하십시오.

바인딩 방향

양방향 바인딩(기본)

기본적으로 데이터 바인딩은 가능한 경우에 한해 양방향입니다. 즉, 변경된 이벤트를 발신하는 속성이 사용자 입력 또는 애니메이션과 같은 데이터 바인딩 이외의 다른 수단에 의해 변경되면 바인딩 오브젝트는 Observable인 경우 새 값을 소스에 다시 기록합니다.

1
<TextInput Value="{text}" />

위의 예에서 사용자가 텍스트 입력을 조작하고 텍스트가 bound Observable이면 Observable이 업데이트 됩니다.

읽기 전용 바인딩(단방향)

데이터 소스에서 읽고 속성을 업데이트하는 단방향 바인딩을 만들려면 Read 바인딩 별칭을 사용합니다:

1
<TextInput Value="{Read text}" />

위 예제에서 사용자가 텍스트 입력을 조작하면 bound Observable 텍스트가 업데이트되지 않습니다.

쓰기 전용 바인딩(단방향)

외부 액터에 의해 속성이 변경될 때 데이터 소스에 쓰는 단방향 바인딩을 엄격하게 만들려면 Write 바인딩 별칭을 사용합니다:

1
<TextInput Value="{Write text}" />

위의 예에서 Value는 JavaScript에서 가져오는 텍스트의 값을 따르지 않지만 사용자가 텍스트 상자를 조작하면 Observable 텍스트를 업데이트 합니다.

JavaScript 함수에 대한 이벤트 바인딩

다음과 같은 구문을 사용하여 JavaScript 함수를 호출하는 이벤트 핸들러를 연결할 수 있습니다:

1
2
3
4
5
6
7
8
<JavaScript>
    module.exports = {
        clickHandler: function (args) {
            console.log("I was clicked: " + JSON.stringify(args));
        }
    };
</JavaScript>
<Button Clicked="{clickHandler}" Text="Click me!" />

Clear-bindings

때로는 포함 페이지가 제거되거나 멀리 이동한 다음 나중에 다른 데이터 컨텍스트로 다시 추가하거나 탐색할 때, 바인딩이 루틴되지 않을 때, 데이터 바인딩에서 대상 속성 값을 지우는 것이 바람직합니다. 일부 시나리오에서는 새로운 데이터가 로드되는 동안 원하지 않는 오래된 데이터가 페이지에 표시됩니다.

이를 방지하기 위해 소위 clear-bindings를 사용할 수 있습니다.

1
<Text Value="{Clear foo}" />

이렇게 하면 포함된 페이지가 루핑되지 않은 경우 텍스트 값이 null(빈 문자열)로 재설정되므로 나중에 페이지를 다시 사용하면 이전 텍스트가 남아 있지 않습니다.

읽기 전용 및 쓰기 전용 바인딩을 위한 명확한 binidng의 변종도 있습니다:

1
2
<Text Value="{ReadClear foo}" />
<Text Value="{WriteClear foo}" />

참고: Clear-bindings은, 속성의 기본 값은 아니고, 루트가 아닌 경우, default(T) (예를 들어, null, false, 0 또는 0.0)를 푸쉬합니다.

Each

Each는 컬렉션의 각 아이템에 대해 UX 마크업 조각을 반복하는 데 사용됩니다.

Each 비헤이비어는 Items 컬렉션의 아이템 당 하위 트리의 사본 한 개를 유지 관리하고 그에 따라 상위 노드에서 추가 및 제거합니다. Items 컬렉션은 동적으로 변경할 수있는 Observable일 수 있습니다.

Each를 사용하는 경우 일반적으로 Items 속성을 배열 데이터 소스에 데이터 바인딩하여 데이터 소스의 객체 당 하나의 비주얼 노드를 생성합니다.

1
2
3
<Each Items="{items}">
    <Rectangle Width="{width}" Height="{height}" Fill="#808" />
</Each>

AddingAnimation, RemoveAnimation 및 LayoutAnimation을 사용하여 Items 컬렉션에서 Observable 추가(add)/제거(remove) 작업을 애니메이션으로 표현할 수 있습니다.

Each 비헤이비어를 중첩할 수도 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<JavaScript>
    var Observable = require("FuseJS/Observable");
    module.exports = {
        items: [
            {
                inner: [
                    { child: "John" },
                    { child: "Paul" }
                ]
            },
            {
                inner: [
                    { child: "Ringo" },
                    { child: "George" }
                ]
            }
        ]
    };
</JavaScript>
<ScrollView>
    <StackPanel>
        <Each Items="{items}">
            <StackPanel Orientation="Horizontal">
                <Each Items="{inner}">
                    <Text Value="{child}" Margin="10" />
                </Each>
            </StackPanel>
        </Each>
    </StackPanel>
</ScrollView>

Count 속성을 사용하여 반복되는 아이템의 수를 가져올 수 있습니다.

또한 Each를 간단한 리피터로 사용할 수도 있습니다:

1
2
3
4
5
<Grid ColumnCount="3">
    <Each Count="9">
        <Rectangle Margin="10" Fill="#610" />
    </Each>
</Grid>

WhileCount와 WhileEmpty

WhileEmpty 및 WhileCount 트리거를 사용하여 컬렉션의 아이템 수를 조정할 수 있습니다:

1
2
3
4
5
6
<Each Items="{friends}">
    <!-- ... 친구 리스트 ... -->
</Each>
<WhileEmpty Items="{friends}">
    <Text>No friends. :(</Text>
</WhileEmpty>

WhileEmpty는 EqualTo 속성이 0으로 설정된 WhileCount의 특별한 경우입니다. WhileCount는 다음 속성을 허용합니다:

  • EqualTo – 콜렉션 수가 제공된 값과 같을 때 활성화됩니다.
  • GreaterThan – 콜렉션 수가 제공된 값보다 클 경우 활성화 됩니다.
  • LessThan – 콜렉션 수가 제공된 값보다 작은 경우 활성화 됩니다.

예제:

1
2
3
<WhileCount Items="{things}" EqualTo="3" GreaterThan="3" >
    <Text>You have 3 or more things.</Text>
</WhileCount>

Select

복잡한 데이터 컨텍스트가 있고 데이터 컨텍스트를 축소하려는 경우 Select를 사용할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
<JavaScript>
    module.exports = {
        complex: {
            item1: {
                subitem1: { name: "Spongebob", age: 32 }
            }
        }
    };
</JavaScript>
<Select Data="{complex.item1.subitem1}">
    <Text Value="{name}" />
    <Text Value="{age}" />
</Select>

Match와 Case

Match와 Case를 사용하여 활성화할 서브 트리를 구동할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
<JavaScript>
    module.exports = {
        active: "blue"
    };
</JavaScript>
<Match Value="{active}">
    <Case String="red">
        <Rectangle Fill="#f00" Height="50" Width="50" />
    </Case>
    <Case String="blue">
        <Rectangle Fill="#00f" Height="50" Width="50" />
    </Case>
</Match>

Case의 유효한 매칭 속성은 다음과 같습니다:

  • String – 문자열 매칭
  • Number – 숫자와 매칭합니다.
  • Bool – 부울 매칭
  • IsDefault – 다른 경우와 매칭되지 않는 경우의 기본
  • 참고: Match.Value는 모든 JavaScript 유형에 데이터 바인딩 될 수 있지만 속성 바인딩을 사용하는 경우 String, Number, Integer 또는 Bool이라는 특수 속성을 사용해야 합니다. 이것은 특성 바인딩이 유형이 동일해야 하기 때문입니다.

DataToResource

DataToResource를 사용하여 정의된 리소스에 바인딩 할 수 있습니다:

1
2
3
4
5
6
7
<FileImageSource ux:Key="picture" File="Pictures/Picture1.jpg" />
<JavaScript>
    module.exports = {
        picture: "picture"
    }
</JavaScript>
<Image Source="{DataToResource picture}" />
Was this article helpful to you? Yes No

How can we help?