Question

我有一个把手辅助方法，它通过ajax获取一个json对象，然后我想将该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

我对派对有点了解，但我遇到了类似的问题并且自己找到了解决方案。

让助手返回一个具有随机/唯一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>';
}

当然，为了使其能够解决OP的确切问题，您需要在服务器上生成整个html块，或者执行更多JavaScript以将选项注入到下拉列表中。

编辑：

第二个想法，如果你这样做，你会引入竞争条件，所以一定要将ajax呼叫推迟到把手完成其工作之后

把手帮助器输出未显示在模板中

2 个答案: