Handlebars.js通过变量访问嵌套数组值及指定日期事件查询

在Handlebars里，要通过变量访问嵌套数组的元素，得用方括号语法来引用变量索引——点语法只适合固定的已知键/索引，变量索引必须用[变量名]包裹才行。

举个实际例子，假设你的上下文数据是这样的：

const context = {
  fruitArray: ['草莓', '蓝莓', '树莓'],
  targetIdx: 2 // 要访问数组的第3个元素（索引从0开始）
};

对应的Handlebars模板可以这么写：

<!-- 输出结果：树莓 -->
{{fruitArray.[targetIdx]}}

如果是更深层的嵌套（比如数组里包含对象），这个语法同样适用：

const context = {
  teams: [
    { name: '掘金', wins: 52 },
    { name: '湖人', wins: 43 }
  ],
  teamIndex: 0
};

模板里访问嵌套属性：

<!-- 输出结果：掘金 -->
{{teams.[teamIndex].name}}

你的数据结构里，外层data对象的键是时间戳，每个时间戳对应的数据里又有events对象（键也是时间戳）。已知代表周五的timestamp变量（值为1522706400），完全可以用Handlebars的动态键访问语法直接定位目标数据，根本不用遍历整个data对象。

核心逻辑就是用[变量名]访问对象的动态键，直接拿到该周五的events集合：

假设上下文包含data和timestamp变量，模板可以这么写：

<!-- 先定位到该周五的events集合 -->
{{#with data.[timestamp].events}}
  <!-- 如果需要展示每个事件的标题 -->
  {{#each this}}
    <div>{{title}}</div>
  {{/each}}
{{/with}}

这里的data.[timestamp]会直接匹配键为1522706400的对象，.events就拿到了该周五的所有事件。如果只是需要获取这个events集合本身（不需要展示），直接写{{data.[timestamp].events}}就能拿到对应的对象，完全不需要遍历外层的data。

补充一句：如果timestamp是从上下文传入的变量，这个语法直接生效；要是模板里的表达式，可能需要括号包裹，但你这里明确是变量，所以直接用[timestamp]就好。

内容的提问来源于stack exchange，提问作者Robin Schambach