Question

我是Handlebars.js的新手，我有一个似乎无法解决的问题。我环顾四周，找不到我正在寻找的答案。

我有一个填充预算信息的主对象。对象的预算部分中的每个元素都有一个具有类别名称的类别，然后是另外12个字段。这些字段称为Jan，Feb，...，Dec，并具有相应月份的Budget项的值。

在主对象的另一部分中，我有一个月份名称数组，名为monthList（Jan，Feb，...，Dec）。

我希望通过预算项目{{#each}}为每个预算类别创建一个<tr>。但是，我不想让我的把手模板为12个月中的每一个定义单独的<td>，而是希望遍历月份列表并在表格中每月创建一个<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/

当然，我的实际用例更复杂。但是，这是一个概念，一旦我理解了这个技术，我将能够在这个应用程序中重复使用。

Answer 1

以下是答案，即使问了一年。我没有添加任何评论，但如果未来的任何寻求答案的读者做出他/她需要的评论，我可以做出解释。大家快乐编码！

＆＃13;

$(document).ready(function() {

  var data = {
    categories: [{
        "name": "Rent",
        "budget": {
          "Jan": "300",
          "Feb": "300",
          "Mar": "300",
          "Apr": "300",
          "May": "300",
          "Jun": "300",
          "Jul": "300",
          "Aug": "300",
          "Sep": "300",
          "Oct": "300",
          "Nov": "300",
          "Dec": "300"
        }
      },
      {
        "name": "Utilities",
        "budget": {
          "Jan": "100",
          "Feb": "100",
          "Mar": "100",
          "Apr": "100",
          "May": "100",
          "Jun": "100",
          "Jul": "100",
          "Aug": "100",
          "Sep": "100",
          "Oct": "100",
          "Nov": "100",
          "Dec": "100"
        }
      },
      {
        "name": "Food",
        "budget": {
          "Jan": "400",
          "Feb": "400",
          "Mar": "400",
          "Apr": "400",
          "May": "400",
          "Jun": "400",
          "Jul": "400",
          "Aug": "400",
          "Sep": "400",
          "Oct": "400",
          "Nov": "400",
          "Dec": "400"
        }
      },
      {
        "name": "Beer",
        "budget": {
          "Jan": "1000",
          "Feb": "1000",
          "Mar": "1000",
          "Apr": "1000",
          "May": "1500",
          "Jun": "1500",
          "Jul": "1500",
          "Aug": "1500",
          "Sep": "1000",
          "Oct": "1000",
          "Nov": "1000",
          "Dec": "1000"
        }
      },
      {
        "name": "Golf",
        "budget": {
          "Jan": "3000",
          "Feb": "3000",
          "Mar": "3000",
          "Apr": "3000",
          "May": "5000",
          "Jun": "5000",
          "Jul": "5000",
          "Aug": "5000",
          "Sep": "5000",
          "Oct": "3000",
          "Nov": "3000",
          "Dec": "3000"
        }
      }
    ],
    months: {
      0: "Category",
      1: "Jan",
      2: "Feb",
      3: "Mar",
      4: "Apr",
      5: "May",
      6: "Jun",
      7: "Jul",
      8: "Aug",
      9: "Sep",
      10: "Oct",
      11: "Nov",
      12: "Dec"
    }
  };

  var tdData = document.getElementById("td-template").innerHTML;
  var thData = document.getElementById("th-template").innerHTML;

  var tdTemplate = Handlebars.compile(tdData);
  var thTemplate = Handlebars.compile(thData);

  var result1 = tdTemplate(data);
  var result2 = thTemplate(data);

  document.getElementById('tdBudget').innerHTML += result1;
  document.getElementById('thBudget').innerHTML += result2;

});

＆＃13;

body {
  font: 15px arial, sans-serif;
}

h1 {
  margin: 0 0 10px 0;
  padding: 5px;
  font-size: 24px;
  background-color: #999;
  color: #fff;
}

table {
  margin: 10px;
}

th,
td {
  padding: 5px;
  border: 1px solid #999;
}

th {
  background: #ccc;
}

tr:nth-child(odd) {
  background: #eee;
}

td a {
  color: #000;
  text-decoration: underline;
}

.numbers {
  text-align: right;
}

＆＃13;

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>

<script id="th-template" type="text/x-handlebars-template">
  {{#each months}}
  <th class='centered'>{{this}}</th>
  {{/each}}
</script>

<script id="td-template" type="text/x-handlebars-template">
  {{#each categories}}
  <tr>
    <td class='numbers'>{{this.name}}</td>
    <td class="numbers">{{this.budget.Jan}}</td>
    <td class="numbers">{{this.budget.Feb}}</td>
    <td class="numbers">{{this.budget.Mar}}</td>
    <td class="numbers">{{this.budget.Apr}}</td>
    <td class="numbers">{{this.budget.May}}</td>
    <td class="numbers">{{this.budget.Jun}}</td>
    <td class="numbers">{{this.budget.Jul}}</td>
    <td class="numbers">{{this.budget.Aug}}</td>
    <td class="numbers">{{this.budget.Sep}}</td>
    <td class="numbers">{{this.budget.Oct}}</td>
    <td class="numbers">{{this.budget.Nov}}</td>
    <td class="numbers">{{this.budget.Dec}}</td>
  </tr>
  {{/each}}
</script>

<div class="container">
  <div class="row clearfix">
    <div class="col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
      <table class="table">
        <thead>
          <tr id="thBudget">
          </tr>
        </thead>
        <tbody class="centered" id="tdBudget">
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

Handlebars.js循环内循环

1 个答案: