AJAX響應不在JavaScript模板中呈現

Question

我有以下jQuery AJAX請求，它會按預期返回正確的JSON響應（這是一個youtube標識）。然而，當我嘗試使用插入ytid到framecode：

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

我留下其中{{ytid}}應與ytid內容所代替一個空的空間。 在Firefox調試器中，ytid顯示爲預期的字符串，並且當我在調試器中運行上述行時，{{ytid}}將按照預期替換爲youtube標識。很奇怪。另外，當我打印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); 
    } 
});