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 图表。

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))
})

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

Mustache JS: fill multiple divs with different content

javascript

mustache