javascript - Mustache 中的对象列表

Question

我正在致力于从 mustache 模板引擎渲染 HTML。

当涉及到处理对象列表时，我陷入了渲染。

这是我的对象:

var Prod={
  "Object1": {
    "name": "name1",
    "category": "laptop"
  },
  "Object2": {
    "name": "name2",
    "category": "laptop"
  },
  "Object3": {
    "name": "name3",
    "category": "Desktop"
  },
  "Object4": {
    "name": "name4",
    "category": "Mobile"
  }
}

这是我要渲染的内容:

var template='{{#Prod}} {{name}} and {{category}} {{/Prod}}'

 Mustache.render(template, {"Prod":Prod});

但它不起作用，我不明白为什么。

请指出我哪里错了。

Answer 1

您需要使您的产品列表成为一个数组，以便自动迭代列表功能。无需让每个产品都可以通过键 Object1、Object2 访问, Object3 等

编辑:如果您无法更改对象格式，您可以使用 Object.keys 和 Array#map 相当轻松地将一种格式转换为另一种格式:

var Prod={
  "Object1": {
    "name": "name1",
    "category": "laptop"
  },
  "Object2": {
    "name": "name2",
    "category": "laptop"
  },
  "Object3": {
    "name": "name3",
    "category": "Desktop"
  },
  "Object4": {
    "name": "name4",
    "category": "Mobile"
  }
}

var products = Object.keys(Prod).map(function (k) { return this[k] }, Prod)

document.body.innerHTML = Mustache.render('\
<ul>\
  {{#products}}\
  <li>{{name}} and {{category}}</li>\
  {{/products}}\
</ul>\
', { products: products })

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>