2013-08-27 4 views
1

WebComponent : created(), inserted()removed()의 세 가지 수명주기 메서드를 재정의 한 후 처음 두 개는 일관되게 호출되지만 removed()은 호출되지 않습니다. removed()이 호출되도록해야 할 특별한 것이 있습니까? 또는 단순히 호출되지 않았습니까?WebComponent.removed()가 이제까지 호출 되었습니까?

답변

5

removed() 메서드는 사용자 정의 요소가 DOM에서 제거 될 때 호출됩니다. 다음은 created(), inserted()removed()주기주기 이벤트의 사용을 보여주는 작은 프로그램입니다. <my-element>,

<!DOCTYPE html> 

<html> 
    <head> 
    <title>index</title> 
    <link rel="import" href="my_element.html"> 
    <script src="packages/polymer/boot.js"></script> 
    </head> 

    <body> 
    <div id='container'><my-element></my-element></div> 
    <script type="application/dart"> 
     import 'dart:html'; 
     void main() { 
     query('#container').onClick.listen((event) { 
      event.target.remove(); 
     }); 
     } 
    </script> 
    </body> 
</html> 

이 파일 가져 오기 및 사용자 정의 요소를 표시합니다

이처럼 보이는 index.html 파일 다트 웹 응용 프로그램을 만듭니다.

<my-element>를 정의하는 다음 파일을 정의합니다

<!DOCTYPE html> 

<html> 
    <body> 
    <polymer-element name="my-element"> 
     <template> 
     <p>The name is {{person.name}}</p> 
     </template> 

     <script type="application/dart" src="my_element.dart"></script> 
    </polymer-element> 
    </body> 
</html> 

을 그리고 라이프 사이클 메소드를 호출하기 보여줍니다 첨부 다트 파일 정의 : 당신이 index.html을 실행하면

import 'package:polymer/polymer.dart'; 

class Person extends Object with ObservableMixin { 
    @observable String name; 
    Person(this.name); 
} 

@CustomTag("my-element") 
class MyElement extends PolymerElement { 
    @observable Person person = new Person('Shailen'); 

    void created() { 
    super.created(); 
    print('created'); 
    } 

    void inserted() { 
    print('inserted'); 
    } 

    void removed() { 
    print('removed'); 
    } 
} 

, 당신은 단락을 볼 것이다 거기에 몇 가지 텍스트가 있습니다. created()inserted() 라이프 사이클 메소드가 호출되고 'created'및 'inserted'메시지가 콘솔에 인쇄됩니다. 사용자 지정 요소가 포함 된 div를 클릭하면 요소가 제거되고 removed() 수명주기 메서드가 호출되고 콘솔에서 '제거됨'이 인쇄됩니다.

희망이 도움이됩니다.

+0

도움을 주셔서 감사합니다. 불행히도 나는 내 질문에 정확하지 않았습니다. 명시 적으로 구성 요소를 제거하지는 않지만 조건부 템플릿을 사용하여 구성 요소를 인스턴스화합니다. 나는 아직 폴리머 라이브러리를 사용하지 않는다. 내가 어떻게 질문을 던 졌는지 생각해 볼 때 나는 당신의 대답을 올바른 것으로 표기해야합니다. 최대한 빨리 폴리머 라이브러리로 이전 할 예정이며,이 마이그레이션이 현재의 문제를 해결할 수 있습니다. 시간 내 주셔서 다시 한 번 감사드립니다! – Y2i