객체 추가/삭제 예제

퓨즈[Fusetools]의 Observable을 이용해서 객체를 추가/삭제하는 예제입니다.

예제를 통해 알 수 있는 것 ::
– Class[컴포넌트]를 만드는 방법
– Property 생성 및 사용법
– 객체의 index 정렬 및 해당 객체 삭제

[[ $.unoproj ]]

1
2
3
4
5
6
7
8
9
10
11
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "Fuse.BasicTheme",
    "FuseJS"
  ],
  "Includes": [
    "*"
  ]
}

[[ MainView.ux ]]

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<App Background="#CCC">
    <Rectangle ux:Class="MyRect" Width="100%" Height="100" Color="#53aee2" CornerRadius="6" ClipToBounds="true" Margin="5" Clicked="{remove}">
        <string ux:Property="txt" />

        <Stroke Width="1" ux:Name="buttonStroke" Brush="#0b2738"/>
        <Text Value="{Property txt}" Alignment="Center" />

        <WhilePressed>
            <BringToFront />
            <Scale Factor="2" Duration="1" />
        </WhilePressed>
        <AddingAnimation>
            <Scale Factor="1.2" Duration="0.3"/>
        </AddingAnimation>
        <RemovingAnimation>
            <Scale Factor="0" Duration="0.3"/>
        </RemovingAnimation>
    </Rectangle>

    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var print = debug_log;

        var arr = Observable();

        /**
         * 데이터 추가
         */

        function add()
        {
            arr.add({Name:Math.random()});
            sortIdx();
        }

        /**
         * 데이터 제거
         * @param args
         */

        function remove(args)
        {
            if(args.data.idx === undefined)
            {// Remove button clicked
                if(arr.length > 0)
                {
                    arr.removeAt(0);
                    sortIdx();
                }
                return;
            }

            arr.removeAt(args.data.idx);
            sortIdx();
        }

        /**
         * idx 정렬
         */

        function sortIdx()
        {
            arr.forEach(function (x, i) {
                x.idx = i;
                return x;
            });
        }

        module.exports = {
            arr:arr,
            add:add,
            remove:remove
        }
    </JavaScript>

    <StackPanel Orientation="Vertical" ItemSpacing="5">
        <Basic.Button Text="Add" Clicked="{add}" />
        <Basic.Button Text="Remove" Clicked="{remove}" />
        <Each Items="{arr}">
            <MyRect txt="{Name}" />
        </Each>
    </StackPanel>
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles