퓨즈[Fuse]는 Observable이라는 객체를 이용해 바인딩(Binding)을 지원합니다. 바인딩이랑 묶는다는 뜻인데, 객체(변수)를 관찰(Observe)하고 있다가 변화가 있을 때 묶여진(등록된) 객체들에게 알려서 정해진 작업을 하도록 하는 것입니다. 퓨즈에서는 JS 객체와 UX(XML)를 연결하는 용도로 사용합니다.

아래 예제를 보면 두 가지를 알 수 있습니다.
1. JS 객체(변수, 함수[이벤트 핸들러])를 전달하는 방법 (module.exports={})
2. 이벤트를 처리하는 방법

* 참고로 JS 객체의 멤버를 확인하려면 아래와 같이 하면 됩니다.

1
2
3
4
for(var prop in args)
{
    console.log(prop + ":" + args[prop]);
}

버튼을 클릭할 때마다 랜덤값을 저장하고, 스위치가 변경될 때마다 상태를 저장하는 예제입니다.

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
31
<App Theme="NativeWithFallback">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var rndValue = Observable(Math.random());
        var switchValue = Observable(true);

        function on_RandomBtnClicked(args)
        {// args: data, sender, x, y, index
            rndValue.value = Math.random();
        }
       
        function on_SwitchValueChanged(args)
        {// args: data, value
            console.log(args.value);// True, False
        }
       
        module.exports = {
            rndValue: rndValue,
            on_RandomBtnClicked: on_RandomBtnClicked,
            switchValue: switchValue,
            on_SwitchValueChanged: on_SwitchValueChanged
        };
    </JavaScript>
    <StackPanel>
        <Text Value="{rndValue}"></Text>
        <Button Text="Random" Clicked="{on_RandomBtnClicked}"/>
        <Text Value="{switchValue}"></Text>
        <Switch Value="{switchValue}" ValueChanged="{on_SwitchValueChanged}"/>
    </StackPanel>
</App>

observable