사용 안내서 취소

사용자 정의 구성 요소의 코드 조각

 

이 문서에서 사용자 정의 구성 요소의 코드 조각에 대해 알아보십시오.

사용자 정의 구성 요소에 코드 조각을 추가하여 좀 더 쉽게 구성 요소와 상호 작용할 수 있습니다. Animate에 있는 두 가지 예제를 살펴보겠습니다. 새로운 코드 조각은 [HTML5 캔버스] -> [구성 요소] 섹션 아래에 추가됩니다.

  1. 클릭 핸들러를 버튼에 연결하기 위한 코드 조각

    // Disable multiple handlers, as these may be used in frame scripts
    if(!this.instance_name_here_click_cbk) {
    function instance_name_here_click(evt) {
    // Start your custom code
    console.log("Button clicked");
    // End your custom code
    }
    // Attach an event handler on the parent with the filter as the
    // Component instance’s id
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
    this.instance_name_here_click_cbk = true;
    }
    // Disable multiple handlers, as these may be used in frame scripts if(!this.instance_name_here_click_cbk) { function instance_name_here_click(evt) { // Start your custom code console.log("Button clicked"); // End your custom code } // Attach an event handler on the parent with the filter as the // Component instance’s id $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this)); this.instance_name_here_click_cbk = true; }
    // Disable multiple handlers, as these may be used in frame scripts
    if(!this.instance_name_here_click_cbk) {
     function instance_name_here_click(evt) {
      // Start your custom code
      console.log("Button clicked");
      // End your custom code
     }
    
     // Attach an event handler on the parent with the filter as the 
     // Component instance’s id
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
     this.instance_name_here_click_cbk = true;
    }
    

    핸들러는 구성 요소 인스턴스에 대해 설정된 필터와 함께 부모(dom_overlay_container)에 연결됩니다. 이것이 중요한 이유는 핸들러를 연결하려고 할 때 구성 요소 인스턴스가 없을 수도 있기 때문입니다. 이렇게 하면 이벤트 핸들러가 올바르게 시작됩니다.

    마찬가지 방법으로 사용자 정의 구성 요소에 대한 이벤트 핸들러를 제공할 수 있습니다.

  2. 입력 컨트롤에서 값을 가져오기 위한 코드 조각

    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
  3. 구성 요소 인스턴스가 DOM에 연결되었을 때 사용할 코드 조각

    // Listen to the attached event, fired by component runtime
    $("#dom_overlay_container").on("attached", function(evt, param) {
    // Check the id of the instance
    if(param && param.id == 'movieClip_1') {
    $("#movieClip_1").text("My Button");
    }
    });
    // Listen to the attached event, fired by component runtime $("#dom_overlay_container").on("attached", function(evt, param) { // Check the id of the instance if(param && param.id == 'movieClip_1') { $("#movieClip_1").text("My Button"); } });
    // Listen to the attached event, fired by component runtime
    
    $("#dom_overlay_container").on("attached", function(evt, param) {           
    // Check the id of the instance 
    if(param && param.id == 'movieClip_1') {                           
    
    $("#movieClip_1").text("My Button");                          
    }
    });
    

쉽고 빠르게 지원 받기

신규 사용자이신가요?