2013-08-11 3 views
0

화면에 너무 많은 열이있는 거대한 테이블이 있습니다. 사용자가 확인란을 사용하여 표시 할 열을 선택할 수있게하려고합니다. 체크 박스 부분은 쉽지만 핸들 바를 사용하여 테이블을 표시하는 방법을 잘 모르겠습니다. 제가 도울 수있는 도우미가 있습니까? Meteor.js를 사용하고 있습니다.핸들 바를 사용하여 이름으로 값 가져 오기

{stats: 
    {symbol: 'A', stat1: 5, stat2, 24.3, stat3: 293, stat4: 3}, 
    {symbol: 'B', stat1: 4, stat2, 24.3, stat3: 293, stat4: 3}, 
    {symbol: 'C', stat1: 2, stat2, 24.3, stat3: 293, stat4: 3} 
} 

{columns: 
    {key: 'stat1', name: 'Stat 1'}, 
    {key: 'stat2', name: 'Stat 2'}, 
    {key: 'stat3', name: 'Stat 3'}, 
    {key: 'stat4', name: 'Stat 4'} 
} 

{currentUser: {columnsToShow: ['stat1', 'stat3']}} 

<table> 
    {{#each stats}} 
     <tr> 
      <td>{{symbol}}</td> 
      {{#each columns}} 
       {{#if inArray key currentUser.columnsToShow}} 
        <td> 
         {{!-- the following is what i'm not sure how to do --}} 
         {{stats[key]}} 
        </td> 
       {{/if} 
      {{/each}} 
     </tr> 
    {{/each}} 
</table> 

inArray는 배열에서 키를 찾으면 true를 반환하고 그렇지 않으면 false를 반환하는 헬퍼입니다. 여기

내가 테이블

A 5 293 
B 4 293 
C 2 293 

EDIT처럼 보이도록 기대 : 그것은

{{#if inArray key currentUser.columnsToShow}} 
    <td> 
     {{returnArrayValueByKeyName key ../../this}} 
    </td> 
{{/if}} 

Handlebars.registerHelper('returnArrayValueByKeyName', function(keyName, array) { 
    return array[keyName]; 
}) 

답변

0

작업에 도착 당신은 단지에 대한 통계를 반환하는 stats_to_show 도우미에 열 도우미를 변경할 수 있습니다 원하는 열 :

<table> 
    {{#each stats}} 
     <tr> 
      <td>{{symbol}}</td> 
      {{#each stats_to_show}} 
       <td> 
        {{this}} 
       </td> 
      {{/each}} 
     </tr> 
    {{/each}} 
</table> 

stats_to_show 도우미는 다음과 같이 보입니다.

Template.stats_table.stats_to_show = function() { 
    result = []; 
    for (column in currentUser.columnsToShow) { 
     // We're using the fact that a single element of stats is bound to 
     // `this` when this helper is called. 
     result.push(this[column]; 
    } 
    return result; 
} 

자바 스크립트 구문이 해제되어 있으면 죄송합니다. 나는 최근에 독점적으로 Coffeescript를 사용 해왔다.