如何使用Handlebars.js按状态拆分对象数组

How to split array of objects by status using Handlebars.js?

本文关键字：拆分 对象 数组 状态 何使用 Handlebars js      更新时间：2023-11-07

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

我有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>

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

您可以轻松创建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>

/！''未测试代码

相关文章：