`onload`와 비슷한 Ember 이벤트가 있습니까

Ember 애플리케이션에 모든 컨텐츠 (예 : 이미지)가로드되었을 때 JavaScript를 실행하고 싶습니다.`onload`와 비슷한 Ember 이벤트가 있습니까

이미 didInsertElement() 및 didRender() 후크를 사용해 보았지만 배경 이미지가로드 될 때까지 기다리지 않은 것 같습니다.

export default Ember.Component.extend({ 
    didInsertElement() { 
     this._super(...arguments); 
     Ember.run.scheduleOnce('afterRender', this, function() { 
     var home =$('#main-outlet')[0]; 
     home.className += " homePage"; 
     startTimer(5); 
     }); 
    }, 
});

모든 솔루션 또는 이에 대한 대안 접근 방식을 :

여기 내 구성 요소의 코드가 어떻게 생겼는지입니까?

출처

2016-11-02 Aman Jagga

[this] (http://stackoverflow.com/questions/10385578/is-there-a-way-to-get-a-callback-when-ember-js-has-finished-loading -everything) –

className'homePage'를 추가하여 무엇을 달성하고 싶습니까? 템플릿에서이 문제를 해결할 수 있습니까? –

페이지가로드 될 때 CSS 애니메이션을 시작하고 싶습니다. –

Ember에는 onload과 같은 이벤트가 없습니다.

그러나 대체 방법으로는 구성 요소 내의 didInsertElement 후크와 함께 jQuery에 대한 Ember의 별칭을 활용하여 원하는 실행 순서를 얻을 수 있습니다. 이 시도 :

export default Ember.Component.extend({ 
    didInsertElement() { 
    Ember.$(window).on('load', this.executeCssAnimations); 
    }, 

    executeCssAnimations() { 
    // your CSS and animation logic would go here 
    Ember.$('.big-background') 
     .text('NOW READY FOR CSS and ANIMATION UPDATES.') 
     .css('color', 'yellow'); 
    }, 

    willDestroyElement(...args) { 
    this._super(...args); 
    Ember.$(window).off('load', 'window', this.executeCssAnimations); 
    }, 
});

willDestroyElement 훅도 포함되었습니다, window에서 load 이벤트 리스너의 적절한 분해 및 제거를 표시합니다.

이것을 설명하기 위해 Ember Twiddle example을 만들었습니다.

출처

2016-11-03 17:36:18 jacefarm

'didRender'는 모든 재 렌더링에서 호출됩니다. 많은 시간이 걸릴 수 있으며 렌더링이 발생할 때마다로드 리스너를 할당하고 싶지 않을 것입니다. 구성 요소가 DOM에 처음 삽입 될 때 (예 :'didInsertElement')에만 필요합니다. 'willDestroyElement'에서 제거하고 싶을 수도 있습니다. – nem035

@ nem035 좋은 코드를 검토해 주셔서 감사합니다 - 리팩터러로 업데이트되었습니다. – jacefarm

`onload`와 비슷한 Ember 이벤트가 있습니까

답변

관련 문제