javascript - FB.api() 在下划线模板内调用

Question

下划线模板文档建议以下应该是可能的，但它对我不起作用。执行模板只是为此返回任何内容。

<% FB.api('/me', function(response){ %>
<%= response.name %>
<% }); %>

Answer 1

这是一个完全有效的模板；事实上，编译后的 JavaScript 版本看起来像这样（为了便于阅读而重新格式化）：

function(obj) {
    var __p = '';
    var print = function() { __p += Array.prototype.join.call(arguments, '') };
    with(obj || {}) {
        __p += '\n';
        FB.api('/me', function(response) { 
            __p += '\n' + response.name + '\n';
        }); 
        __p += '\n';
    }
    return __p;
}

这并没有错。顺便说一句，source如果您想查看模板的 JavaScript，可以查看已编译的 Underscore 模板的属性：

var t = _.template(raw_template);
console.log(t.source);

但是，它不会做你期望它做的事情。您的问题是FB.api调用是 AJAX 调用，而A代表异步。因此，当您的回调被调用（即被<%= response.name %>执行）时，模板将被转换为 HTML 并添加到 DOM 中，并且__p不再查看该变量。序列看起来像这样：

1. 编译模板并调用编译后的模板函数。
2. FB.api被调用。
3. 模板函数返回一些 HTML。
4. 来自3的 HTML被添加到 DOM。
5. 时间流逝。
6. Facebook 做出响应并调用您的FB.api回调。
7. response.name附加到__p缓冲区。

你将不得不稍微改变你的逻辑。您的FB.api电话应该在您的模板之外：

var t = _.template(...);
FB.api('/mu', function(response) {
    var html = t({ response: response });
    // Somehow add html to the DOM
});

这样您就不会在所有数据准备好之前尝试使用模板。