Question

我试图在ajax调用（它提供我需要的JSON）成功时从触发的函数渲染带有underscore.js的模板。

我遇到了某种奇怪的行为：

当第一次ajax调用成功时，我收到此错误：

未捕获的ReferenceError：未定义响应

如果第二次成功，没有刷新页面，一切都按预期进行。

我的JSON有这样的结构：

{
    data: [ 
        item1: {count: "1", url: "http://example1.com", id:"arstd", formatted:"1"},
        item2: {count: "53", url: "http://example2.net", id:"hneio", formatted:"0"},
        ...
    ]
}

我的underscore.js模板：

<script type="text/template" id="count_template">
    <% _.each (response.data, function (item) { %>
    <a href="<%- item.url %>">
        <li>
            <p id="<%- item.id %>" class="name">
                <%- item.formatted %>
            </p>
            <p id="<%- item.id %>_count" class="count">
                <%- item.count %>
            </p>
        </li>
    </a>
    <% }); %>
</script>

我的ajax回调函数：

var on_result_count_fetched = (function () {
    var totals = $(".regions .count");
    var ajax_loader = $("#ajax_loader");
    var c_tl = $('#count_template');
    var count_div = $('#res_count');
    //getting the template for the count response
    if (c_tl) {
        var c_template = _.template(c_tl.html());
    }
    _.templateSettings.variable = "response";
    //real callback
    return function (response) {
        if (response.redirect) {
            window.location.replace(data.redirect);
        } else {
            //hide loading animation
            ajax_loader.hide();
            if (!response && _.isEmpty(response)) {
                var tmp = $("<button>In case of fail: do this other action!</button>")
                tmp.click (function() {
                    fetch_results ("searx");
                });
            } else {
                console.log(response);
                var tmp = c_template(response);
            }
            count_div.empty();
            count_div.append(tmp);
        }
    }
}());

Answer 1

当您说_.template(some_string)时，Underscore将使用_.templateSettings中的值来解析some_string并将其转换为JavaScript函数。 _.template向您返回已编译的模板函数后，_.templateSettings的内容不再重要。

你正在做这类事情：

var t = _.template(some_string);
_.templateSettings.variable = "response";

因此，_.templateSettings.variable的{{1}}作业来得太晚，无法影响您的_.template来电。在调用_.templateSettings之前，您需要调整_.template ，以便：

if (c_tl) { var c_template = _.template(c_tl.html()); } _.templateSettings.variable = "response";

看起来应该更像：

if (c_tl) { _.templateSettings.variable = "response"; var c_template = _.template(c_tl.html()); }

或者您可以完全跳过_.templateSettings并说：

var tmp = c_template({ response: response });

调用模板函数时。如果您的其他模板不希望使用_.templateSettings来访问其数据，那么使用response进行混乱可能会产生副作用。在一个地方全局配置_.templateSettings或者完全不管它，可以更好地工作。

Underscore.js - 模板第一次不编译

1 个答案: