使用Mustache.Js渲染简单数组

时间:2012-04-06 15:42:13

标签: arrays mustache

有一个如下所示的数组

var arrNames = ["Stackoverflow","StackExchange","Webmaster","Programmers"];

模板应该如何使用mustache.js javascript模板。我试过下面但没有线索

  • {{#}}{{key}}{{/}}

1 个答案:

答案 0 :(得分:62)

来自documentation

  

循环遍历字符串数组时,a。可用于引用列表中的当前项目。

     

模板:

     
    

{{#滑膛枪}}     * {{。}}     {{/火枪}}

  
     

查看:

     
    

{      “火枪手”:[“Athos”,“Aramis”,“Porthos”,“D'Artagnan”]     }

  
     

输出:

     
    
        
  • 通过Athos
  •     
  • 阿拉米斯
  •     
  • 波尔托斯
  •     
  • 达达尼昂
  •     
  

var tpl = document.getElementById('simple').innerHTML,
  view = {
    items: ['Stackoverflow', 'StackExchange', 'Webmaster', 'Programmers']
  };

document.getElementById('output').innerHTML = Mustache.to_html(tpl, view);
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script type="template" id="simple">
  <h1>Array Values</h1>
  <ul>
    {{#items}}
    <li>{{.}}</li>
    {{/items}}
  </ul>
</script>

<div id="output"></div>