2

我做了一个小应用程序，它显示了 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-helper 并加载图像后进行某种回调来刷新？

提前致谢 ;）

4

1 回答 1

0

我不知道您如何编译 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);
    }
});
}

如果您想确保在使用数据之前已加载数据，请传递一个回调函数，该函数仅在模板完全呈现时才会调用。

于 2013-12-31T10:53:59.337 回答