如何将循环的每个迭代包装在单独的div容器中

Question

我正在尝试创建嵌套在数组中的对象列表.我能够将每个对象的属性附加到特定元素(即"title"属性放在H1元素中,等等); 但是,我希望每个对象及其所有属性都包含在每个对象的单独DIV元素中.截至目前,所有对象都在一个div中.我想也许有一个forEach循环可能是必要的.我已经尝试搞乱它,似乎无法解决这个问题,虽然看起来它应该相当简单.

这是我的代码:

<div id="container"></div>

CSS

#container {
  margin:50px;
  padding: 50px;
  border: 1px solid black;
}

和脚本:

var ads = [
    {
        title: "Title 1",
        description: "Lorum ipsum dolor",
        start_date: "2018-09-01",
        end_date: "2018-12-30",
        offer: "50% Off",
        num_of_products: 7
    },
    {
        title: "Title 2",
        description: "Lorum ipsom",
        start_date: "2018-08-01",
        end_date: "2018-11-30",
        offer: "Save $25",
        num_of_products: 10
    },
    {
        title: "Title 3",
        description: "Lorum ipsum dolor etc",
        start_date: "2018-09-01",
        end_date: "2018-10-30",
        offer: "35% Off",
        num_of_products: 8
    },

];


    const parent = document.getElementById("container");

  for( { title, description, start_date, end_date, offer, num_of_products } of ads) {

    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;    
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;    
    const discount = document.createElement("h2");
    discount.textContent = offer;    
    const products = document.createElement("h4");
    products.textContent = num_of_products + " items still available! " ;

   // append 
    parent.appendChild(headline);
    parent.appendChild(discount);
    parent.appendChild(descrip);
    parent.appendChild(products);
    parent.appendChild(dates);

 }

Answer 1

为此,我将使用一个名为lit-html的轻量级库,它非常适合这些类型的作业:

<div id="container"></div>

<script type="module">
  import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module'
  import { repeat } from 'https://unpkg.com/lit-html/directives/repeat.js?module'

  const offerTemplate = ({title, description, start_date, end_date, offer, num_of_products}) => html`
    <article>
      <h1>${title}</h1>
      <p>${description}</p>
      <sub>Offer valid ${start_date} through ${end_date}</sub>
      <h2>${offer}</h2>
      <h4>${num_of_products} items still available!</h4>
    </article>`

  const offersTemplate = offers => html`${repeat(offers, offerTemplate)}`

  render(offersTemplate(ads), document.getElementById('container'))
</script>

一种流行的模式是将迭代的叶子定义为自己的自定义元素:

const offerTemplate = ad => html`
  <ads-offer
      title="${ad.title}"
      description="${ad.description}"
      start-date="${ad.start_date}"
      end-date="${ad.end_date}
      offer="${ad.offer}"
      num-products="${ad.num_of_products}"
  ></ads-offer>`

您可以在其中<ads-offer>单独定义DOM 并独立于集合.