handlebars.js是否支持承诺?

时间:2013-07-26 07:42:03

标签: asynchronous handlebars.js promise

我的模型的某些属性应该异步加载(由promises实现)。我不想等待它 - 我想立即渲染它,并在承诺解决时部分更新它。 handlebars.js是否支持它?

2 个答案:

答案 0 :(得分:0)

Handlebars不支持异步。这使得无法将Promises用于表达式和帮助器。您可以使用highlightValue()但这会暂停执行,因此在Promise结算之前不会进行渲染。其他模板框架如dust.js提供异步功能。

答案 1 :(得分:0)

我想我可以提出一种解决方法来使异步(或承诺)(似乎)起作用。下面是示例。基本上这就是我正在做的

  1. 首先返回一个带有 unique Id 的 div(我在这里使用命名空间 + 自动增量)
  2. 进行处理(ajax 或其他缓慢的处理)。完成后,通过 unique id
  3. 访问它,用新数据替换第 1 步中 div 的 innerHTML

代码如下。观察三重括号 ({{{ }}})。这是为了确保生成的 HTML 不会被转义


<script id="handlebars-demo" type="text/x-handlebars-template">
   <div>
     -->> {{{functionName "functionParam" }}} <<-- 
   </div>
</script>

<div id="output"  />

<script>
    window.id=0;
    Handlebars.registerHelper('functionName',  function(funcParam ){
            let tempId = "my_namespace_" + window.id++;
            $.post("https://something.com/abc").done(function(data){
                        $("#"+tempId ).html(data.something);
                    }
                )
            return '<div id='+tempId+'>loading</div>'
        });


    var template = document.getElementById("handlebars-demo").innerHTML;
    var templateScript = Handlebars.compile(template);
    var context = { };
    var html = templateScript(context);
    document.getElementById("output").innerHTML= html;
</script>