Mustache.js：我怎样才能添加外部模板

Question

嗨，我是新来这个Mustache.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页面中保存模板脚本时，此代码正常工作。但我想分开保存模板并使用它。 有没有办法做到这一点？

Answer 1

$(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"); 
     }); 
    }); 
}); 

来源：http://www.levihackwith.com/how-to-load-mustache-js-templates-from-an-external-file-with-jquery/