Handlebars.jsを使って状態の配列を分割する方法は？

Question

私は、コードで初心者は午前、これは非常に愚かな質問である：配列と待機/作業/行わ

外部JSファイル：

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

私はタスクと3つの異なる列を持つ

テンプレート：

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

状況別に分けて別々の列に入れる方法は？

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

そして、あなたが行うことができます：あなたが持っている今

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) 
} 

を：

Answer 1

あなたはイースリー3つのニュース配列を作成することができます！

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

/\テストされていないコード