Question

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

我有3个不同的列，其中包含任务：waiting / working / done

带有数组的外部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>

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

Answer 1

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

/！\未经过测试的代码

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

1 个答案: