L.Control関数を拡張するときにカスタムテンプレートを使用する方法は？

Question

リーフレットマップを作成するとき、私は現在、プログラム的にそうよう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> 

上記の方法を実行すると、コード内の改行/空白/などを縮小して削除しなければならず、更新を行うたびに面倒になります。あらゆるヒントありがとう！

Answer 1

私はjavascriptの

ためMustacheを示唆しているスクリプトは、あなたが簡単にいくつかのチュートリアルを見つけることができCDN

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

で提供されています。ここで

は、あなたのデータとexampleある

EDIT：

テンプレートは、ビューとデータを分離するのに有用です。 テンプレートを使用する必要はないが、メニューを作成する簡単な方法は、アクセスする目に見えないhtml要素に書き込むだけです。

document.getElementById('menu1').innerHTML