핸들 막대 헬퍼 출력이 템플릿에 표시되지 않습니다.

Question

저는 아약스를 통해 json 객체를 가져 오는 handlebars 헬퍼 메소드가 있습니다. 그런 다음 json을 html로 포맷하고 템플릿에 삽입하려고합니다.

콘솔에 html과 출력을 빌드하고 출력을 올바르게 확인하지만
핸들 막대 도우미 결과가 템플릿에 표시되지 않습니다.

 
Handlebars.registerHelper("accounts_dropdown", function() { 
    function get_dropdown(callback){ 
    var dropdown='Select Account'; 

    $.ajax({ 
     url: 'accounts', 
     success: function(response){ 
      for(var i=0;i<response.length;i++){ 
      dropdown+=' < option value="'+response[i].id+'">'+response[i].name+'</option>'; 
       } 

      callback(dropdown); 
      } 
     }); 
    } 

    get_dropdown(function(dropdown){ 
     console.log(dropdown); 
     return new Handlebars.SafeString(dropdown); 
    }); 
    }); 

내 템플릿

나는이 비동기 드롭 다운 로딩되기 때문에, 작동하지 않을

 

{{accounts_dropdown}} 

Answer 1

있습니다. 도우미 함수는 템플릿에 삽입 할 Handlebars 값을 반환해야하지만 도우미가 실제로 아무것도 반환하지 않습니다.

Handlebars.registerHelper("accounts_dropdown", function() { 
function get_dropdown(){ 
var dropdown='Select Account'; 

$.ajax({ 
    url: 'accounts', 
    async: false, 
    success: function(response){ 
     for(var i=0;i<response.length;i++){ 
     dropdown+=' < option value="'+response[i].id+'">'+response[i].name+'</option>'; 
      } 
     } 
    }); 

return dropdown; 
} 

return new Handlebars.SafeString(get_dropdown()); 
}); 

Answer 2

내가 파티에 비트 laste 해요,하지만 난 그냥 비슷한 문제를 가지고 있었고, 내 자신에 대한 해결책을 발견 하나 개의 옵션과 같이, 동 기적으로로드하는 것입니다.

도우미가 임의/고유 ID가있는 div를 반환하고 ajax 콜백에 응답을 삽입하도록합니다. 물론

var id = 'my-async-template-' + Math.floor(Math.random() * 11); 

$.ajax({ 
    url: 'accounts', 
    async: false, 
    success: function(response){ 
    $('#' + id).html(response); 
}); 

return '<div id="' + id + '"></div>'; 
} 

는, 당신이 서버에서 전체 HTML 블록을 생성하거나 드롭 다운에 옵션을 주입 좀 더 자바 스크립트를해야 ​​할 것 OP의 정확한 문제와 함께 작동하도록합니다.

편집

: 당신이 그런 식으로 할 경우

두 번째 생각에

, 당신은 때까지 후 핸들에 그쪽으로 아약스 호출을 연기해야하므로, 경쟁 조건을 소개하겠습니다가 작업 완료