Question

创建Leaflet地图时，我目前通过扩展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;
    }
});

问题是我的自定义菜单很大，我讨厌必须编写内部HTML代码。

有没有办法从另一个文件中使用某种模板并在那里编写代码，然后像这样调用变量：

container.innerHTML = myMenuTemplate;

然后，模板可能像：

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

问题在于，如果我执行上述方法，我必须缩小并删除代码中的换行符/空格/等，并使每次进行更新时都相当繁琐。感谢您的任何提示！

Answer 1

我建议将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

扩展L.Control功能时如何使用自定义模板？

1 个答案: