用Handlebars.js預加載模板

我做了一個小應用程序，它顯示了base64編碼的圖像，下面有一些文本。我使用iScroll滾動屏幕模板和Handlebars.js。用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執行完成並載入圖像之後有什麼樣的回調來刷新？

在此先感謝;）

來源

2013-08-30 blendboom

我不知道你是如何編譯你的車把模板，但這裏是我如何使用一個通用模板編譯功能使用自定義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); 
    } 
}); 
}

如果你想確保你的數據在加載之前已經加載，傳遞一個回調函數，只有當模板已經完全渲染時纔會調用該函數。

來源

2013-12-31 10:53:59 zetof

用Handlebars.js預加載模板

回答

相關問題