Backbone.js : 렌더링 후 뷰에서 이벤트 트리거

Question

백본보기에서 렌더링이 완료된 후 이벤트가 발생하도록 바인딩하는 방법이 있습니까?

링크를 클릭 한 후 DOM에 추가 된 입력에 jQuery Date Range Picker를 연결하려고하는데 렌더링 중에 범위 피커가 잘못된 위치에 나타납니다 (입력에 아직 DOM 위치가 지정되지 않았습니다.) 따라서 날짜 선택 도구를 연결하기 전에 입력이 렌더링 된 후에야 기다려야합니다. Coffeescript는 다음과 같습니다.

@makeDateRangePicker

는 날짜 선택을

class window.ClientDestinationPricingFieldsView extends ModelSaverView 
    template: (json) -> 
    _.template(jQuery("#special-pricing-timeframe-template").html()) json 

    render: -> 
    jQuery(@el).html @template(@model.toJSON()) 
    @makeDateRangePicker jQuery(@el).find("input[name=date_range]") 
    this 

Answer 1

나는 이것을 시도 할 것이다 :

class window.ClientDestinationPricingFieldsView extends ModelSaverView 
    events: 
    'click input[name=date_range]': 'makeDateRangePicker' 

    template: (json) -> 
    _.template(jQuery("#special-pricing-timeframe-template").html()) json 

    render: -> 
    jQuery(@el).html @template(@model.toJSON()) 
    this 

당신은 대신에 이벤트 요소를 취할 @makeDateRangePicker을 수정해야합니다.

Answer 2

편집을 inits 기능입니다 : 그래서, 솔루션에서 마지막 찌르기가 아니었다입니다.

당신이 말하는 것은 jQuery(@el).html으로 전화 한 후 예상되는 html이 없습니까? 그것은 매우 이상하게 들린다.

jQuery(@el).find("input[name='date_range']") 

주 date_range 주위 ' 작은 따옴표 : 나는 당신이 당신의 속성 값을 인용 할 필요가있는대로 간단있을 것 같아요.

편집 : 죄송합니다. 실제로는 따옴표없이 작동하는 것으로 확인되었습니다. 나는 이전과 비슷한 것에 물 렸습니다. 어쨌든 질문이 맞으면 (클릭 이벤트에서 입력을 추가하는 방법에 대한 정보로 업데이트 된 후) 요소를 추가 한 직후 makeDateRangePicker으로 전화해야합니다.

Answer 3

일반적으로 setTimeout을 시간 초과없이 사용할 수 있습니다. setTimeout(..., 0)은 브라우저가 다시 제어를 받으면 기본적으로 호출 할 함수를 대기시킵니다. 다음과 같은 내용 :

Google지도에서이 트릭을 사용하여 위치와 크기를 적절하게 조정합니다.

Answer 4

이 작업을 수행하는 한 가지 방법은 렌더링이 완료된 후 부모보기에서 사용자 지정 이벤트를 트리거하는 것입니다. $('body').trigger('my-rendering-is-done') (더 좋은 방법은 호출 코드에서 렌더링되는 뷰에서 트리거하는 것입니다). makeDateRangePicker을 사용하는 청취자가 있습니다.