使用把手循环遍历数组中的所有子元素

Question

我想使用车把遍历下面数组中的所有产品，以前我没有用过车把。问题是产品可以在任何级别使用，无法预测我们可以在哪个级别拥有产品。如果可以使用本机javascript完成此操作，请也提及该解决方案。有人可以帮我吗？ ：）.....

var data = [
    {
        category: "Deserts",
        products: [
            {
                name: "AAAA",
                price: "aaaa"
            },
            {
                name: "BBBB",
                price: "bbbb"
            }
      ]
  },
  {
      category: "Unit Documents",
      children : [
          {
               children : [
                   {
                       products: [
                           {
                               name: "CCCC",
                               price: "cccc"
                           }
                       ]
                   }
              ],
              products: [
                  {
                      name: "DDDD",
                      price: "dddd"
                  },
                  {
                      name: "EEEE",
                      price: "eeee"
                  },
                  {
                      name: "FFFF",
                      price: "ffff"
                  }
             ]
         },
         {
             products: [
                 {
                      name: "GGGG",
                      price: "gggg"
                 },
                 {
                      name: "HHHH",
                      price: "hhhh"
                 }
             ]
        }
    ],
    products: [
       {
            name: "IIII",
            price: "iiii"
       }
   ]
   },
   {
        Category: "Minutes"
   }
];

Answer 1

下面您将找到使用车把和嵌入式部分的解决方案。我希望这会有所帮助。

$(document).ready(function () {
  var context =[
    {
        category: "Deserts",
        products: [
            {
                name: "AAAA",
                price: "aaaa"
            },
            {
                name: "BBBB",
                price: "bbbb"
            }
      ]
  },
  {
      category: "Unit Documents",
      children : [
          {
               children : [
                   {
                       products: [
                           {
                               name: "CCCC",
                               price: "cccc"
                           }
                       ]
                   }
              ],
              products: [
                  {
                      name: "DDDD",
                      price: "dddd"
                  },
                  {
                      name: "EEEE",
                      price: "eeee"
                  },
                  {
                      name: "FFFF",
                      price: "ffff"
                  }
             ]
         },
         {
             products: [
                 {
                      name: "GGGG",
                      price: "gggg"
                 },
                 {
                      name: "HHHH",
                      price: "hhhh"
                 }
             ]
        }
    ],
    products: [
       {
            name: "IIII",
            price: "iiii"
       }
   ]
   },
   {
        Category: "Minutes"
   }
];

	var source   = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html    = template(context);
  $("#resultPlaceholder").html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
{{#*inline "myPartialLoopOverProducts"}}
{{#each this}}
{{#each products}}
<li>{{name}} : {{price}}</li>
{{/each}}
{{>myPartialLoopOverProducts this}}
{{/each}}
{{/inline}}

Products:
<ul>
{{>myPartialLoopOverProducts this}}
</ul>
</script>
<br/>
<div id="resultPlaceholder">
</div>