javascript - 使用 handlebars helper 生成新数组，并在 html 中使用新数组

Question

我目前将一个对象数组传递给 Handlebars 辅助函数以进行排序并返回一个新数组。我想使用新数组来填充我的 html。

我的 Handlebars 模板如下:

  FoodGroup: [
    {
      name: "vegetables",
      foods: [
        {
          name: "celery",
          description: "lorem ipsum..."
        },
        {
          name: "cucumber",
          description: "lorem ipsum..."
        }
      ]
    },
    {
      name: "fruits",
      foods: [
        {
          name: "banana",
          description: "lorem ipsum..."
        },
        {
          name: "apple",
          description: "lorem ipsum..."
        }
      ]
    }
  ]

这是我的辅助函数的样子:

<script type="text/javascript">
    Handlebars.registerHelper("sortFood", function(items, options){
        var allFood = [];
        // iterate through each FoodGroup
        for (var i = 0; i < items.length; i++) {
            var seperatedArray = items[i].foods;
            // iterate through all foods within each group and push into allFood array
            for (var j = 0; j < seperatedArray.length; j++) {
                allFood.push(seperatedArray[j]);
            }
        }
        // sort all foods alphabetically
        allFood.sort(function(a,b){
            var textA = a.name.toLowerCase();
            var textB = b.name.toLowerCase();
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        });

        // create new object for individual arrays for first letter of each food name
        var sortedFood = {};
        for (var i=0; i<allFood.length; i++) {
          var l = allFood[i].name.substring(0,1);
          // ensure object has key
          if (!sortedFood[l]) sortedFood[l] = [];
          sortedFood[l].push(allFood[i]);
        }

        console.log(sortedFood)

        return sortedFood;
    });

</script>

目前我像这样将一个数组传递给辅助函数

{{#sortFood FoodGroup}}
{{/sortFood}}

辅助函数返回一个排序后的对象，如下所示。助手获取原始对象 FoodGroup 并拉出所有食物对象并将其按字母顺序排列在数组中:

sortedFood= {
  A: [
    {
      name: "Apple",
      description: "lorem ipsum ...."
    }
  ],
  B: [
    {
      name: "Banana",
      description: "lorem ipsum ...."
    }
  ],
  C: [
    {
      title: "Celery",
      summary: "lorem ipsum ...."      
    },
    {
      title: "Cucumber",
      summary: "lorem ipsum ...."      
    },
    {
      title: "Customer Surveys",
      summary: "lorem ipsum ...."      
    }
  ]
  .. etc   
}

我想在我的 html 中生成一个看起来像这样的列表，使用 handlebars 助手中新生成的“sortedFoods”数组

<h1>A</h1>
   <li>Apple</li>
<h1>B</h1>
   <li>Banana</li>
<h1>C</h1>
   <li>Celery</li>
   <li>Cucumber</li>

Answer 1

这是使用 Handlebars 的方法。您可以运行以下代码片段并检查代码。关键是使用 option.fn() 返回您的数据，然后您可以在自定义助手的调用中使用模板。要获得 a、b、c 标签，您必须使用 {{#each}} 助手和其中的 {{@key}}。

$(document).ready(function () {
  var context = {
      FoodGroup: [
    {
      name: "vegetables",
      foods: [
        {
          name: "celery",
          description: "lorem ipsum..."
        },
        {
          name: "cucumber",
          description: "lorem ipsum..."
        }
      ]
    },
    {
      name: "fruits",
      foods: [
        {
          name: "banana",
          description: "lorem ipsum..."
        },
        {
          name: "apple",
          description: "lorem ipsum..."
        }
      ]
    }
  ]
  };
    Handlebars.registerHelper("sortFood", function(items, options){
        var allFood = [];
        // iterate through each FoodGroup
        for (var i = 0; i < items.length; i++) {
            var seperatedArray = items[i].foods;
            // iterate through all foods within each group and push into allFood array
            for (var j = 0; j < seperatedArray.length; j++) {
                allFood.push(seperatedArray[j]);
            }
        }
        // sort all foods alphabetically
        allFood.sort(function(a,b){
            var textA = a.name.toLowerCase();
            var textB = b.name.toLowerCase();
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        });

        // create new object for individual arrays for first letter of each food name
        var sortedFood = {};
        for (var i=0; i<allFood.length; i++) {
          var l = allFood[i].name.substring(0,1);
          // ensure object has key
          if (!sortedFood[l]) sortedFood[l] = [];
          sortedFood[l].push(allFood[i]);
        }

        //console.log(sortedFood)

        return options.fn(sortedFood);
    });
	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">
{{#sortFood FoodGroup}}
  {{#each this}}
    <h1>{{@key}}</h1>
    {{#each this}}
      <ul>
        <li>{{name}}</li>
        <li>{{description}}</li>
      </ul>
    {{/each}}
  {{/each}}
{{/sortFood}}
</script>
<br/>
<div id="resultPlaceholder">
</div>