web-dev-qa-db-ja.com

Mustache.Jsを使用して単純な配列をレンダリングする

以下のような配列を持つ

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

テンプレートがmoustache.js JavaScriptテンプレートを使用してどのように見えるか。以下を試しましたが、手掛かりはありません

  • {{#}}{{key}}{{/}}
arraysmustache
23
Deeptechtons

ドキュメント から：

文字列の配列をループする場合、。リスト内の現在のアイテムを参照するために使用できます。

テンプレート：

{{#musketeers}} * {{。}} {{/ musketeers}}

見る：

{「銃士」：[「アトス」、「アラミス」、「ポルトス」、「ダルタニャン」]}

出力：

  • アトス
  • アラミス
  • ポルトス
  • ダルタニャン
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>
70
maxbeatty