Question

I’ve got a handlebars helper method which is fetching a json object through ajax and I then want to format that json into html and inject it into the template.

I build the html and output to the console, and see the output properly, but
the result of the handlebars helper never gets displayed in the template.

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);
    });
  });

and in my template I have

 {{accounts_dropdown}}

Answer 1

This isn’t going to work, because you are loading the dropdown asynchronously. Your helper function needs to return a value for Handlebars to insert into the template, but your helper isn’t actually returning anything. One option would be to load it synchronously, like so:

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());
});