Список объектов в усах

Я работаю над рендерингом 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});

Но он не работает, и я не понимаю, почему.

Пожалуйста, предложите мне, где я ошибаюсь.


node.js javascript html mustache
person Sam    schedule 10.03.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно сделать свой список продуктов массивом, чтобы сработала автоматическая итерация списков. Нет необходимости, чтобы каждый продукт был доступен по ключам 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>

person gyre    schedule 10.03.2017

arrow_upward
2
arrow_downward

Похоже, что 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});
person mparis    schedule 10.03.2017
comment
Я не могу изменить формат объекта. Пожалуйста, предложите решение для текущего формата объекта - person Sam; 10.03.2017
comment
Можете ли вы изменить его в функции рендеринга? НАПРИМЕР. render(template, {Prod: Object.keys(Prod).map(key => Prod[key]))? - person mparis; 10.03.2017