Mustache JS：填充多个具有不同内容的div

Question

我是第一次使用Mustache JS，并对实现我想要的最佳方式提出疑问。我有以下页面，其中几个div设置方式相同，但需要获得不同的内容。

这是我到目前为止所得到的：

<script id="mustacheTemplate1" type="text/template">
    <div class="{{box_cols}}">
        <div class="box box-{{box_color}}">
            <h2 class="box-title">{{box_title}}</h2>
            {{box_content}}
        </div>
    </div>
</script>

<div class="target-output1"></div>

<script type="text/javascript">
var template1 = $("#mustacheTemplate1").html();
var targetContainer = $(".target-output1");

var shows = { 
    "box_cols": "col-lg-3 col-md-6 col-sm-6",
    "box_color": "blue",
    "box_title": "Title goes here",
    "box_content": "Content goes here",
};

var html = Mustache.to_html(template1, shows);

$(targetContainer).html(html);  
</script>

这填补了我的第一个div，这就是我想要的。我可以重复这个并将target-output1复制到target-output2，target-output3等。但我想知道是否有更好或更有效的方法？

我不知道这是否重要，但我会在某些div内容中使用Google Charts。

Answer 1

您可以使用一个循环，假设您需要填充所生成内容的所有div

var template1 = $("#mustacheTemplate1").html();

[
  { 
    "box_cols": "col-lg-3 col-md-6 col-sm-6",
    "box_color": "blue",
    "box_title": "Title goes here",
    "box_content": "Content goes here",
  },
  { 
    "box_cols": "col-lg-3 col-md-6 col-sm-6",
    "box_color": "red",
    "box_title": "Another Title",
    "box_content": "Totally different content goes here",
  }
  //, ... etc
].forEach(function(data, i) {
  $('.target-output' + (i+1)).html(Mustache.to_html(template1, data))
})