Underscore.js - 模板第一次没有编译答案

【问题标题】：Underscore.js - template does not compile on first timeUnderscore.js - 模板第一次没有编译
【发布时间】：2016-07-26 13:35:56
【问题描述】：

我正在尝试从 ajax 调用（它为我提供我需要的 JSON）成功时触发的函数中使用 underscore.js 呈现模板。

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

第一次ajax调用成功时，报错：

未捕获的引用错误：未定义响应

第二次成功时，不刷新页面，一切按预期进行。

我的 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);
        }
    }
}());

【问题讨论】：

标签： javascript templates underscore.js underscore.js-templating

【解决方案1】：

当您说_.template(some_string) 时，Underscore 将使用来自_.templateSettings 的值来解析some_string 并将其转换为JavaScript 函数。一旦_.template 将编译好的模板函数返回给您，_.templateSettings 的内容就不再重要了。

你正在做这样的事情：

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

因此您的_.templateSettings.variable 分配来得太晚，无法影响您的_.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 });

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

【讨论】：