Javascript 如何使用handlebar.js按状态拆分对象数组？

我是一名编码初学者，这是一个非常愚蠢的问题：

我有3个不同的任务栏：等待/工作/完成

带数组的外部js文件：

var tasks = [
    {
        title: 'First Task',
        picUrl: 'imgs/test.jpg',
        status: 'pending',
    },
    {
        title: 'Second Task',
        picUrl: 'imgs/another.jpg',
        status: 'running',
    },  
];

和模板：

<script type="text/x-handlebars-template" id="post-template">
    <div class="post">
        <p class="post-title">{{title}}</p>
        <img src="{{picUrl}}" alt="{{picAlt}}" class="post-Pic" />          
    </div>
</script>

{{title}

---

如何通过状态将它们分开并放在不同的列中？

您可以轻松创建3个新闻数组：

var filtered_tasks = {}
for (t in tasks) {
  let task = tasks[t]
  if (!filtered_tasks[task.status]) { 
    filtered_tasks[task.status] = []
  }
  filtered_tasks[task.status].push(task)
}

现在你有：

filtered_tasks === {
  pending: [
    {
        title: 'First Task',
        picUrl: 'imgs/test.jpg',
        status: 'pending',
    }
  ],
  running : [
    {
        title: 'Second Task',
        picUrl: 'imgs/another.jpg',
        status: 'running',
    }
  ]
];

你可以做到：

<div class="post">
  <h3>Running</h3>
  {{#each filtered_tasks.running}}
    <p class="post-title">{{title}}</p>
    <img src="{{picUrl}}" alt="{{picAlt}}" class="post-Pic" />   
  {{/each}} 

  <h3>Pending</h3>
  {{#each filtered_tasks.pending}}
    <p class="post-title">{{title}}</p>
    <img src="{{picUrl}}" alt="{{picAlt}}" class="post-Pic" />   
  {{/each}} 

  <h3>Done</h3>
  {{#each filtered_tasks.done}}
    <p class="post-title">{{title}}</p>
    <img src="{{picUrl}}" alt="{{picAlt}}" class="post-Pic" />   
  {{/each}}       
</div>

跑步
{{{#每个已筛选的_任务。正在运行}
{{title}
{{/每个}}
悬而未决的
{{{#每个已筛选的_任务.挂起}
{{title}
{{/每个}}
多恩
{{{#每个筛选的_任务.完成}
{{title}
{{/每个}}

/！\未测试代码