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

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

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

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

编译模板并调用已编译的模板函数。
FB.api被召唤。
模板函数返回一些HTML。
3 中的HTML已添加到DOM。
时间过去了。
Facebook回复并调用您的FB.api回调。
response.name附加到__p缓冲区。

你将不得不将你的逻辑内部改变一下。您的FB.api来电应该在模板之外：

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

这样您就不会尝试使用模板，直到所有数据都准备就绪。

FB.api（）调用下划线模板

1 个答案: