我做了一个小应用程序,它显示 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();
});
Handlebars 模板:
<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 是否同步工作,但由于它在图像数据较小时工作,我认为这可能是图像加载(正在解码)太慢的问题。
有没有什么方法可以在将 Handlebars.js 模板附加到 DOM 之前预加载它们,或者在执行 Handlebars-helpers 和加载图像后进行某种回调来刷新?
提前致谢;)
最佳答案
我不知道你是如何编译 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);
}
});
}
如果你想确保你的数据在播放之前已经加载,传递一个回调函数,只有当模板完全呈现时才会被调用。
关于javascript - 使用 Handlebars.js 预加载模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18528358/