컴포넌트 만들기

그룹화하기

두개의 텍스트 element를 생성한 후 그룹으로 지정 버튼을 눌러 그룹화 합니다.

기능 구현

그룹을 선택한 상태에서 initialize 이벤트 창을 열 스크립트 작성 항목을 선택한 후 옵션에 따라 달라지는 동작을 구현합니다.

    var textbox1 = $self.children('element-9df72b7f-69c5-4ea9-b065-41be67589c31');
    var textbox2 = $self.children('element-b5aa4e4c-b6fb-4903-a4a3-0c5114416096');

    console.error('text1 : ', textbox1.api.text());
    console.error('text2 : ', textbox2.api.text());
    console.error('capsule : ', $self.capsule);
    /*
    //output
    text1 : 텍스트 박스1
    text2 : 텍스트 박스2
    capsule: {}
    */

현재 캡슐화 작업은 진행하지 않았으므로 $self.capsule 값은 빈 오브젝트를 출력합니다.

$self.capsule에 text1, text2 라는 변수가 전달된다고 가정하고 텍스트박스 문자열을 바꾸는 코드를 작성하겠습니다.

    var textbox1 = $self.children('element-9df72b7f-69c5-4ea9-b065-41be67589c31');
    var textbox2 = $self.children('element-b5aa4e4c-b6fb-4903-a4a3-0c5114416096');

    // text1, text2 값으로 문자 표시 변경
    textbox1.api.text($self.capsule.text1);
    textbox2.api.text($self.capsule.text2);