3

アンダースコアテンプレートのドキュメントは、次のことが可能であることを示唆していますが、私にとってはうまくいきません。テンプレートを実行しても、何も返されません。

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

1 に答える 1

3

これは完全に有効なテンプレートです。実際、コンパイルされた 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 を確認したい場合は、コンパイルされたアンダースコア テンプレートの属性を確認できます。

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

すべてのデータの準備が整うまでテンプレートを使用しないようにします。

于 2012-08-07T21:14:10.047 に答える