javascript - Mustache.js - 使用 $get() 获取外部模板数据时出现问题

Question

js 和我使用 $get() 方法获取外部模板，如下所示

function open_device_player(device_id)   
{
        var device_data={
                device_id:device_id
            };
        var n;
        $.get('js/temp.html', function(template, textStatus, jqXhr) {
                 n=Mustache.render($(template).filter('#pageTpl').html(), device_data);
                alert("inside get: "+n);
       });
        alert("outside get: "+n);
        $("body").append(n);

    }
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#videodiv_"+device_id );
    return false;
}

这是我的模板文件 temp.html

<script id="pageTpl" type="text/template">
    <div data-role='page' id='videodiv_{{device_id}}'>
        <div data-role=header>
            <h1> Device Page </h1>

        </div>
        <div data-role=content>
            <img id='vid_{{device_id}}' src='http://localhost/mobilestreamvideo/mjpg/{{device_id}}' width='320'>
        </div>
    </div>
</script>

我的问题是我无法在 $get() block 之外使用变量数据 n 以及当我使用警报显示 时n 首先显示外部警报，然后显示 $get() block 内的警报。

Answer 1

这是因为$.get像$.ajax一样是异步调用。之后的代码不会等待其完成，这就是为什么 $.get 之外的警报会先于 $.get 中发现的警报触发的原因。基本上 $.get 调用将触发，其余代码将继续工作，当 $.get 完成时，它将触发其内部回调函数。

您需要在 $.get 调用中附加新内容。

如果您确实需要使其同步，您将需要使用 $.ajax 函数并将 async 参数设置为 false。但请注意，在这种情况下，您的整个页面执行将停止，至少直到 $.ajax 完成。