0

クライアント側のテンプレート ライブラリ Dust.js を使用しようとしています。「img」タグの「src」属性(コード中の{profile.picUrl})に、Ajax(Json形式)でサーバーから取得した値を入力したい。

問題は、Ajax 呼び出しが行われる前に、ブラウザーが画像を読み込もうとして HTTP 404 応答が返されることです (「src」にはテンプレート プレースホルダーが含まれています)。サーバーへの 404 リクエストなしでこれを行う方法はありますか?

問題を再現するサンプルを次に示します。

<body>
    <div class="template">
    hi {profile.user}
    <img src="{profile.picUrl}" />
    <div id="actions">
        {#actions}
        <a href="{url}">{text}</a><br /><br />
        {/actions}
    </div>
    </div>
    <script>
       function fillTemplates(responsedat, status, xhr) {
            if (status === "success") {
                template = $('.template').html();
                dust.compileFn(template,"t");
                dust.render("t", responsedat, function (err,out) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    else {
                        $('.template').html(out);
                    }

                });
                $('.template').show();
            }
        }
        $.get('landing.jsp', {}, fillTemplates);
        $.ready(function () {
            $('.template').hide();
        });
    </script>
</body>

PS: 中括弧 ({profile.user}) 内の名前は、dust.js 構文のテンプレートに値を入力するために使用されます

4

2 に答える 2

1

通常、クライアント側のテンプレートが使用されているのを見ると、テンプレート自体は「アクティブな」DOM の一部ではありません。多くの場合、バックボーンの例など、スクリプト ブロックにあります。

例: http://jsfiddle.net/Rj2Hd/1/

<html>

<body>
    <script type="text/template" id="template">
    hi {profile.user}
    <img src="{profile.picUrl}" />
    <div id="actions">
        {#actions}
        <a href="{url}">{text}</a><br /><br />
        {/actions}
    </div>
    </script>
    <script>
       function fillTemplates(responsedat, status, xhr) {
            if (status === "success") {
                template = $('#template').html();

alert(template);
        // your stuff here
            }
        }


        $(function () {
            fillTemplates(null, 'success', null);
        });
    </script>
</body>

</html>
于 2012-11-08T18:58:59.707 に答える
0

ソースのプレースホルダー値を変更できる場合は、実際のアドレスを指定するか、AJAX から応答があるまで指定しないようにするだけで済みます。

于 2012-11-08T18:57:14.847 に答える