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

编辑:让它工作

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

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

1 回答 1

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

抱歉,如果我的 Javascript 语法关闭。我最近一直在专门使用 Coffeescript。

于 2013-08-11T09:37:18.637 回答