如何在擴展L.Control函數時使用自定義模板？

當創建單張地圖，我目前編程通過擴展L.Control像這樣加我的菜單和傳說：如何在擴展L.Control函數時使用自定義模板？

var overlaysMenuCtrl = L.Control.extend({ 
    onAdd: function(map){ 
     var container = L.DomUtil.create('div', 'legend'); 
     container.innerHTML = '<div id="mainMenu"><ul><li>blah</li></ul>'; 
     return container; 
    } 
});

的問題是，我的自定義菜單是巨大的，我討厭寫的innerHTML類似的代碼那。

是否有使用某種類型的模板從另一個文件，並編寫代碼那裏，然後調用，像這樣的變量的方式：

container.innerHTML = myMenuTemplate;

然後，模板可能是這樣的：

<div> 
    <ul> 
     <li>A list item</li> 
     <li>and so on...</li> 
    </ul> 
</div>

問題是，如果我做了上面的方法，我必須縮小和刪除代碼中的換行符/空格/等等，並使得每次更新時都相當乏味。感謝您的任何提示！

來源

2016-09-08 redshift

我建議Mustache爲JavaScript

該腳本可以用CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js" type="text/javascript"></script>

你可以很容易地找到一些教程。

這裏是一個example與您的數據

編輯：

模板是分離的觀點和數據非常有用。如果您確實不需要模板，但只需簡單的方法來編寫菜單，則可以將它們寫入不可見的html元素，您可以使用它們訪問

document.getElementById('menu1').innerHTML

來源

2016-09-08 14:00:09 YaFred

如何在擴展L.Control函數時使用自定義模板？

回答

相關問題