下划线模板内的 FB.api(） 调用

FB.api() calls inside underscore template

本文关键字：api 调用 FB 下划线      更新时间：2023-09-26

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

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

这是一个完全有效的模板;事实上，编译后的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;
}

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

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
});

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

相关文章：