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

您需要将产品列表设为一个阵列，以便自动迭代列表功能。无需按键Object1，Object2，Object3访问每个产品等等。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

看起来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});

胡子中的对象列表

2 个答案: