Mustache Js 视图中的各种对象

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

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

在 Mustache 视图中使用 {{#}}{{/}} 表示您希望遍历对象。

参见 MustacheJS。它包含您起床和运行小胡子所需的所有信息。

查看

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

Mustache Js 视图中的各种对象

Mustachejs various objects in view

javascript

mustache