小鬍子JS：用不同的內容填充多個div

Question

我正在第一次使用小鬍子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等。但我想知道是否有更好或更有效的方法？

我不知道它是否重要，但我打算在部分divs內容中使用Google Charts。

Answer 1

你可以使用一個循環假設你有你需要填寫與生成的內容

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