JavaScriptテンプレートでAJAXレスポンスがレンダリングされない

Question

私は次のjQuery AJAXリクエストを受け取り、正しいJSONレスポンスを期待通りに返します（これはYouTubeのIDです）。しかし、私が使用してframecodeにytidを挿入しよう：

rendered = Mustache.render(framecode, {ytid: ytid}); 

私は{{ytid}}がytidの内容に置き換えてください空きスペースが残っています。 Firefoxのデバッガでは、ytidが期待通りに文字列として表示され、デバッガで上記の行を実行すると、{{ytid}}が期待通りにyoutube idに置き換えられます。非常に奇妙な。また、コンソールにytidを印刷すると、正しく印刷されるため、変数が空ではないと確信しています。

$(document).on("click", ".movlist_youtubebutton", function() { 
    console.log("Youtube Button Clicked"); 
    var ytid = $(this).data('ytid'); 
    var movid = $(this).data('movid'); 

    function isEmpty(str) { 
     return (!str || 0 === str.length); 
    } 

    if (isEmpty(ytid)) { 
     $.ajax({ 
      url: "/gettrailer/", 
      method: "GET", 
      data: {movid: movid}, 
      dataType: "json", 
      success: function (result) { 
       console.log(result); 
        ytid = result.ytid; 
        window.ytid = ytid; 
        console.log(ytid); 
      } 
     }); 
    } 
    framecode = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ytid}}" frameborder="0" allowfullscreen></iframe>'; 
    rendered = Mustache.render(framecode, {ytid: ytid}); 
    console.log(rendered); 
    // window.ytid = 'test3' 
    console.log(ytid); 
    popup = $('#popup' + movid); 
    popup.popup({ 
     opacity: 0.3, 
     transition: 'all 0.3s' 
    }); 
    popup.popup('show'); 
    popup.html(rendered); 
}); 

Answer 1

この$.ajax呼び出しは非同期なので、framecodeが既に割り当てられた後にそれが完了しているため。これを修正するには、$.ajaxの後にコードの残りの部分を.thenにラップする必要があります。

Answer 2

ここでスティーブンの答え

function isEmpty(str) { 
    return (!str || 0 === str.length); 
} 

function framereplace(ytid, movid) { 
    framecode = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ytid}}" frameborder="0" allowfullscreen></iframe>'; 
    rendered = Mustache.render(framecode, {ytid: ytid}); 
    popup = $('#popup' + movid); 
    popup.popup({ 
     opacity: 0.3, 
     transition: 'all 0.3s' 
    }); 
    popup.popup('show'); 
    popup.html(rendered); 
} 

$(document).on("click", ".movlist_youtubebutton", function() { 
    console.log("Youtube Button Clicked"); 
    var ytid = $(this).data('ytid'); 
    var movid = $(this).data('movid'); 

    if (isEmpty(ytid)) { 
     $.ajax({ 
      url: "/gettrailer/", 
      method: "GET", 
      data: {movid: movid}, 
      dataType: "json", 
      success: function (result) { 
       console.log(result); 
       ytid = result.ytid; 
      } 
     }).then(framereplace(ytid, movid)); // needs to happen after 
    } else { 
     framereplace(ytid, movid); 
    } 
});