onRender의 요소에서 작동하지 않습니다.

Question

onRender 메서드 (또는 item:rendered 콜백)의 일부 HTML 요소를 사용하려고하면 오류가 발생합니다.

예 :

 
Bars.EditGallery = Backbone.Marionette.ItemView.extend 
    template: 'bars/edit_gallery' 
    className: 'edit-gallery' 

    onRender: -> 
    # If I just write @$('select').chosen(), it doesn't work 
    # despite the jQuery object contains what I expect. 
    # To get it working, I have to write: 
    callback = -> @$('select').chosen() 
    setTimeout(callback, 0) 

그것은 필드에 포커스를주는 것처럼, 다른 사람의 행동과 동일합니다.
어떻게 처리하나요? setTimeout의 트릭이 작동하지만 그다지 우아하지 않습니다.

Answer 1

이 문제는 this issue에서 언급 한대로 Chosen이 원인입니다.

Answer 2

렌더링에 사용 된 템플릿이 비동기 적으로로드 될 때 이런 현상이 발생했습니다. 나는 최근 릴리스에서 이것을 풀 수정 요청이 있다고 생각했다. Marionette의 어떤 버전을 사용하고 있습니까?

그러나 JST를 사용하고있는 것처럼 보이므로 문제가되지 않아야합니다. 설정에서 비동기 적으로 렌더를 발생시키는 원인이 있습니까?

그래도 비동기 문제가 발생할 수 있습니다. setTimeout을 사용하면 문제가 해결되므로 onRender 메서드가 호출되기 전에 렌더링이 완료되지 않았다고 생각됩니다.

또한 jQuery 선택기가 실제로 원하는 객체를 실제로 반환하는지 여부를 알 수 없습니다. 선택기를 확인하기 위해 console.log를 사용하는 경우 잘못된 결과가 표시 될 수 있습니다. console.log은 그 자체가 비동기식입니다 (대부분의 브라우저에서, 어쨌든 ... 모든 것에 대해 확실하지 않습니다). 이는 항목을 기록하라는 요청이 이벤트 루프의 끝에서 대기열에 들어간다는 것을 의미합니다. 로깅이 발생할 때까지는 DOM 요소를 사용할 수 있습니다.

FWIW : 나는 정기적으로 정확한 목적으로 onRender을 사용하며, 작동시키기 위해 setTimeout을 사용한 적이 없었습니다. 그래서 내 가정은 비동기 작업과 관련된 렌더링 프로세스에서 재미있는 일이되었습니다.