Javascript js：如何添加外部模板

嗨，我是这个小胡子的新手 我有一个模板和js代码如下

 var template = $('#pageTpl').html();
   var html = Mustache.to_html(template, data);
    $('#sampleArea').html(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//mjpg/{{device_id}}' width='320'>
        </div>
    </div>
</script>

设备页

当我将模板脚本保存在html页面中时，这段代码运行良好。但我想单独保留模板并使用它。 有没有办法做到这一点

$(document).on('pageinit', function() {
    $.getJSON('assets/data/channels.json', {}, function(channelData, textStatus, jqXHr) {
        var channelList = $('#channels');

        $.get('assets/templates/channelList.mustache.html', function(template, textStatus, jqXhr) {
            channelList.append(Mustache.render($(template).filter('#channelTpl').html(), channelData))
            channelList.listview("refresh");
        });
    });
});

资料来源：

---

来源：

我正在尝试使用您的解决方案从模板创建标头，但当我尝试访问该文件时，安全策略（跨源不支持html）阻止我访问它。我如何使用这个示例（知道我不能使用服务器，因为它也被设计为与Android Webview（脱机）一起使用）调用是异步的，因此返回的结果可能与您期望的顺序不符。我正在尝试使用您的解决方案从模板创建标头，但当我尝试访问文件时，安全策略（跨源不支持html）阻止我访问它。我如何使用此示例（我知道我不能使用服务器，因为它也被设计用于Android Webview（脱机）。感谢您必须注意，

$.get（）

调用是异步的，因此返回的结果可能不符合您期望的顺序。