javascript - Mustache Js View 中的各种对象

Question

我有一个在 {} 中包含数据数组的对象，我想打印所有参数的名称属性。

对象是:

[

 {
  "name": "Chris",
  "value": 10000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
 },

 {
  "name": "Estafanie",
  "value": 14000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
 },

 {
  "name": "Paul",
  "value": 20000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
 }
]

我想在我的 html 中看到:

Chris, Estefanie, Paul

我尝试:

{{# _.each(name, function(listname){ }}
      <div class="col-md-3 col-sm-4 col-xs-4">
        <div class="names">
          <h5>{{{ listname }}}</h5>
        </div>
      </div>
    {{# }) }}

但不起作用；/我在 Mustache 文档中找到，但没有看到任何相同的内容。

有人可以帮我解决这个问题吗？

谢谢

Answer 1

您的 View 看起来不像 MustacheJS View 。将其修改为如下所示。将“ObjectLiteralName”替换为对象文字变量名称。

在 Mustache View 中使用 {{#}}{{/}} 表示您希望循环遍历一个对象。

参见MustacheJS 。它包含启动和运行 Mustache 所需的所有信息。

查看

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
   {{#ObjectLiteralName}}
   <div class="col-md-3 col-sm-4 col-xs-4">
      <div class="names">
       {{name}}
      </div>
   </div>
   {{/ObjectLiteralName}}
</script>

Javascript

function renderTemplate() {
  var $template = $('#template').html();
  Mustache.parse($template);   // optional, speeds up future uses
  var rendered = Mustache.render($template, ObjectLiteralName);
  $('#target').html(rendered);
}

结果

<div class="col-md-3 col-sm-4 col-xs-4">
  <div class="names">
     Chris
  </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
  <div class="names">
     Estefanie
  </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
  <div class="names">
     Paul
  </div>
</div>