使用Ajax请求在客户端JavaScript模板中填充图片源网址

Question

我正在尝试使用客户端模板库ust.js。 我想使用从服务器使用Ajax（Json格式）检索到的值来填充“ img”标签（代码中的{profile.picUrl}）的“ src”属性。

问题在于，在进行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}）中的名称用于按ust.js语法填充模板中的值

Answer 1

通常，当我看到使用客户端模板时，模板本身不是“活动” DOM的一部分。 它通常位于脚本块中，例如来自主干的示例： http : //coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/

示例： 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>

Answer 2

如果您可以更改源的占位符值，它应该简单到给它一个真实的地址，或者直到您收到AJAX的答复才提供一个真实的地址。

使用Ajax请求在客户端JavaScript模板中填充图片源网址

问题描述

2 个解决方案

解决方案1
1 2012-11-08 18:58:59

解决方案2
0 2012-11-08 18:57:14

使用Ajax请求在客户端JavaScript模板中填充图片源网址

问题描述

2 个解决方案

解决方案1 1 2012-11-08 18:58:59

解决方案2 0 2012-11-08 18:57:14

解决方案1
1 2012-11-08 18:58:59

解决方案2
0 2012-11-08 18:57:14