Я новичок в Handlebars.js, и у меня есть проблема, которую я не могу решить. Я огляделся и не смог найти точно ответ, который я ищу.Handlebars.js Loop Within Loop
У меня есть главный объект, заполненный информацией о бюджете. Каждый элемент в части бюджета объекта имеет категорию с названием категории, а затем еще 12 полей. Эти поля называются Jan, Feb, ..., Dec и имеют значения элемента Budget за соответствующий месяц.
В другом разделе главного объекта у меня есть массив месячных имен, называемых monthList (январь, февраль, ..., декабрь).
Что бы я хотел сделать, это {{#each}} через элементы бюджета, чтобы создать один <tr> в категории бюджета. Но вместо того, чтобы мой шаблон руля имел отдельный <td>, определенный для каждого из 12 месяцев, я хотел бы выполнить итерацию через месяцList и создать один <td> в месяц по таблице.
Я не могу на всю жизнь понять, как это осуществить. Я подозреваю, что это с помощником руля, но я не совсем понимаю, как это сделать.
Мой объект данных выглядит следующим образом:
var data = {
budget: [{
category: "Rent",
Jan: "300",
Feb: "300",
Mar: "300",
Apr: "300",
May: "300",
Jun: "300",
Jul: "300",
Aug: "300",
Sep: "300",
Oct: "300",
Nov: "300",
Dec: "300"
}, {
category: "Utilities",
Jan: "100",
Feb: "100",
Mar: "100",
Apr: "100",
May: "100",
Jun: "100",
Jul: "100",
Aug: "100",
Sep: "100",
Oct: "100",
Nov: "100",
Dec: "100"
}, {
category: "Food",
Jan: "400",
Feb: "400",
Mar: "400",
Apr: "400",
May: "400",
Jun: "400",
Jul: "400",
Aug: "400",
Sep: "400",
Oct: "400",
Nov: "400",
Dec: "400"
}, {
category: "Beer",
Jan: "1000",
Feb: "1000",
Mar: "1000",
Apr: "1000",
May: "1500",
Jun: "1500",
Jul: "1500",
Aug: "1500",
Sep: "1000",
Oct: "1000",
Nov: "1000",
Dec: "1000"
}, {
category: "Golf",
Jan: "3000",
Feb: "3000",
Mar: "3000",
Apr: "3000",
May: "5000",
Jun: "5000",
Jul: "5000",
Aug: "5000",
Sep: "5000",
Oct: "3000",
Nov: "3000",
Dec: "3000"
}],
monthList: {
1: "Jan",
2: "Feb",
3: "Mar",
4: "Apr",
5: "May",
6: "Jun",
7: "Jul",
8: "Aug",
9: "Sep",
10: "Oct",
11: "Nov",
12: "Dec"
}
};
У меня есть jsfiddle, который устанавливает вещи и показывает, как это сделать, создав <td> вручную. В разделе <thead> есть <th> элементов, которые были созданы так, как я хотел бы создать элементы <td> в корпусе <table>.
Любая помощь была бы оценена МОСТ!
https://jsfiddle.net/gregorylmartin/1ynpk6rt/6/
Мой фактический случай использования является более сложным, конечно. Но это концепция, которую я смогу повторно использовать в этом приложении, как только я получу технику.
Единственная реальная probelm вы столкнулись, что вам нужно, чтобы отобразить исходные структуры данных к чему-то лучше приспособленному к рулям. Просто преобразуйте объекты бюджета в '{categoryName: value, costs: []}' Обращение с рулями не там, где эта логика должна быть выполнена, как вы сказали, это неэффективно. Я бы добавил, что дело не в ваших взглядах. Ему не нужно было так много знать о ваших данных. –
Sebastian на 100% верный. Я крошечный цикл JS, и мои данные преобразуются в формат, более подходящий для Handlebars. Вот пересмотренная скрипта ... [https://jsfiddle.net/gregorylmartin/1ynpk6rt/7/](https://jsfiddle.net/gregorylmartin/1ynpk6rt/7/) – user3245690
Добавлен небольшой помощник для еще большей функциональности , Довольно мощный материал ... [https://jsfiddle.net/gregorylmartin/1ynpk6rt/8/](https://jsfiddle.net/gregorylmartin/1ynpk6rt/8/) – user3245690