jQuery.handlebars 템플릿이 동적 DOM 추가시 렌더링되지 않음

Question

jQuery.handlebars를 템플릿 라이브러리로 사용하여 내 앱을 초기화하기 위해 동적 DOM 추가 기능을 사용하고 있습니다. 그러나 jQuery.handlebar의 문제점은 동적으로 호출 된 DOM에 템플릿을 렌더링하지 않는다는 것입니다. 예

$(document).ready(function(){ 
     $('body').append('<div id="content"></div>'); 
     $('#content').render('default', { 

     }); 
    )}; 

기본값은 모든 템플릿 경로가 올바르게 초기화 된 default.hbs 파일입니다.

그러나 그것은 어디

index.html을

<div id="#content"></div> 

JQuery와 jQuery.handlebars 또 다른 문제는 그것의 모든 요소를 ​​추가하지 않는다는 것입니다

$('#content').render('default', { 

    }); 

파일의 경우에 작동 jQuery를 사용하는 템플릿. 예

default.hbs

<div id="#append-content"></div> 

JQuery와 코드는

 $('#append-content").html('Hi'); 

하지만 내용 "안녕"표시되지 않습니다.

다소 혼란 스럽거나, 틀렸거나 불만 사항이 있으면 jQuery.handlebars의 사용에 관해서 알려주십시오. 함께 갈 새로운 템플릿 라이브러리를 제안하십시오.

Answer 1

jquery.handlebars 렌더링 방법이 비동기입니다. 렌더링이 완료되기 전에 컨테이너에 추가하려고합니다. render 메소드는 렌더링이 완료되면 'render.handlebars'이벤트를 트리거합니다. 콜백에서 DOM 조작을 수행하십시오.

$('#content').render('template', { 

}).on('render.handlebars', function() { 
    $('#append-content').html("hello"); 
});