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-helpers が実行されて画像が読み込まれた後に何らかのコールバックを更新する方法はありますか?

前もって感謝します ;）

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 に答える