Mustache 中的对象列表

Question

我正在从小胡子模板引擎渲染 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

看起来 Prod 是一个对象而不是列表。

如果您将代码更改为以下内容，我相信它应该可以工作。

var Prod = [
  {
    "name": "name1",
    "category": "laptop"
  },
  {
    "name": "name2",
    "category": "laptop"
  },
  {
    "name": "name3",
    "category": "Desktop"
  },
  {
    "name": "name4",
    "category": "Mobile"
  }
}

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

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

Answer 2

您需要将产品列表设为一个数组，以便自动迭代列表功能。无需通过键 Object1、Object2、[=14 访问每个产品=]，等等

编辑： 如果您不能更改对象格式，您可以使用 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>

Mustache 中的对象列表

List of objects in Mustache

html

javascript

node.js

mustache