2017-02-15 12 views
1

Aurelia을 사용 중입니다.콘텐츠가 Aurelia에서 동적으로로드 된 후 함수 실행

나는 id이 주어진 게시물을 표시하는 post 경로가 있습니다. 서버는 HTML에 대한 게시물을 작성하는 데 사용되는 마크 다운을 컴파일하고 난 사용하여 내 템플릿에서이 내용을로드하고 있습니다 :

<div innerHTML.bind="post.content"></div> 

// in the activate() function 
client 
    .fetch(`api/post/${params.id}`) 
    .then(res => res.json()) 
    .then(data => { 
     this.post = data; 

     // this is the workaround I am currently using 
     setTimeout(this.displayLineNumbers, 200); 
    }); 

내가 때 기능을 실행할 수있는 방법을 찾을 수 없습니다 내용이보기에 첨부되었습니다. 는 난 단지 사용하는 경우 : 콘텐츠가 아직 연결되지 않았기 때문에

this.post = data; 
this.displayLineNumbers(); 

그것은 따라서 제 기능을 변경하기위한 것입니다 요소를 사용할 수없는 경우, 실패합니다. 현재 사용하고있는 해결 방법은 200ms를 기다린 다음 함수를 실행하는 것입니다.

동적으로로드 된 콘텐츠가 첨부 된시기를 알 수있는 방법 (이벤트 또는 기능)이 있습니까? 또는 innerHTML.bind보다 콘텐츠를 템플릿 화하는 또 다른 방법일까요?

답변

5

기술적으로 Aurelia는 DOM에 자체적으로 붙어 있으며이 단계에서 페이지에 넣는 것에 대해 아무것도 모릅니다. 그러나 이것은 작업 대기열의 후보와 같습니다. 나는 또한 aurelia-composed이라는 e2e 테스팅을 주로 목표로하는 이벤트가 있음을 기억합니다.

작업 대기열을 사용하면 Aurelia가 작업 바인딩 우선 순위 등의 작업 우선 순위를 지정하는 작업 대기열의 맨 아래로 작업을 푸시 할 수 있습니다. 나는 이것이 당신이 원하는 것을 할 것이라고 믿습니다.

import {TaskQueue} from 'aurelia-framework'; 

activate() { 
client 
    .fetch(`api/post/${params.id}`) 
    .then(res => res.json()) 
    .then(data => { 
     this.post = data; 

     this.taskQueue.queueMicroTask(() => { 
      this.displayLineNumbers(); 
     }); 
    }); 
} 
+0

이 문제는 많은 사람들에게 좋은 해결책을 제시해 왔습니다. Aurelia가'.queueMicroTask()'를 자동으로 추가하고 viewmodel 메소드 (예 :'bindingFinished()')를 호출하는 라이프 사이클 후크 (가능한 경우)를 추가하는 것을 고려해야합니다. – LStarky

+0

이것을 위해'queueMicroTask'를 사용할 것을 권장하며 공식 교육 과정에서이를 가르칩니다. –