使用Handlebars.js預加載模板

Question

我制作了一個小應用程序，其中顯示了base64編碼的圖像以及下面的一些文本。 我將iScroll用於滾動，將Handlebars.js用於屏幕模板。

我的問題是，有時調用iScroll.refresh（）方法為時過早，無法計算正確的尺寸。

app.dataInterface.getContents(self.gameid, self.state, function(contents){
    self.currentContents = contents;
    for (i=0; i<contents.length; i++) {
        $(IngameView.cimgtemplate(contents[i])).hide().appendTo(".content").fadeIn();
    }
    self.setScroll();
    });

車把模板：

<script id="content-img-tpl" type="text/x-handlebars-template">
        <div class="contents content_img" id="{{content_id}}">
            <img class="image" src="{{src}}"/>
            {{txt}}
        </div>
</script>

我不太確定把手是否可以同步工作，但是由於它在圖像數據較小時可以工作，因此我認為圖像加載（解碼）速度太慢可能是一個問題。

是否有任何方法可以在將Handlebars.js模板附加到DOM之前預加載它們，或者在執行Handlebars-helpers和加載圖像后進行某種回調以刷新？

提前致謝 ;）

Answer 1

我不知道您如何編譯您的Handlebars模板，但這是我通過將通用模板編譯功能與自定義json請求結合使用來解決此問題的方法：

function initTemplate(jsonWS, templateName, callback){
$.ajax({
    url: jsonWS,
    dataType: 'json',
    data: { 'field-action': 'select', 'jquery-list': templateName },
    success: function(data){
        var templateScript = $('#' + templateName).html();
        var template = Handlebars.compile(templateScript); 
        $('.' + templateName).html(template(data)); 
    },
    complete: function(){
        if(callback != null) callback();
    },
    error: function(data){
        notify(data.responseText);
    }
});
}

如果要確保在播放數據之前已加載數據，請傳遞一個回調函數，該函數僅在模板完全渲染后才被調用。