handlebars.js 支持 promises 嗎？

Question

我的模型的某些屬性應該異步加載（由承諾實現）。 我不想等待 - 我想立即渲染它並在承諾解決時部分更新它。 handlebars.js 支持嗎？

Answer 1

把手不支持異步。 這使得無法將 Promise 用於表達式和助手。 您可以使用await但這會暫停執行，因此在 Promise 解決之前不會進行渲染。 其他模板框架（如dust.js）提供異步功能。

Answer 2

我想我可以提出一種解決方法來使異步（或承諾）（似乎）起作用。 下面是示例。 基本上這就是我正在做的

1. 首先返回一個具有unique Id的 div（我在這里使用命名空間 + 自動增量）
2. 進行您的處理（ajax 或緩慢的處理）。 完成后，通過unique id訪問它，用新數據替換 step1 中 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>