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已编译的 Underscore 模板的属性，如果您想查看模板的 JavaScript:

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

但是，它不会执行您期望的操作。你的问题是 FB.api call 是一个 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
});

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