我目前将一个对象数组传递给车把帮助函数以进行排序并返回一个新数组。我想使用新数组来填写我的html。
我的车把模板如下：
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}}
helper函数返回一个排序对象，如下所示。助手获取原始对象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
}
我想使用车把助手中新生成的“sortedFoods”数组在我的html中生成一个如下所示的列表
<h1>A</h1>
<li>Apple</li>
<h1>B</h1>
<li>Banana</li>
<h1>C</h1>
<li>Celery</li>
<li>Cucumber</li>
这是使用车把的方法。您可以运行下面的片段并检查代码。关键是使用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>