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/