如何渲染带有流星空格键模板的表和每行的行号？

Question

How can I render a table with a meteor spacebars {{#each}} in a template and for each row add row number in first column like below:

| | title header | content header |

| 1 | first title | first content |

| 2 | second title | second content |

| 3 | third title | third content |

This is my each code now:

<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th></th>
        <th>title</th>
        <th>content</th>
    </tr>
    </thead>
    <tbody>
        {{#each posts}}
            <tr>
            <td>
                *** need index for each row in this column ***
            </td>
            <td>
                {{ title }}
            </td>
            <td>
                {{ content }}
            </td>
            </tr>
        {{/each}}
    </tbody>
</table>

Is there a way to get the array index within the {{#each}} or define extra property named index myself and index++ in each iteration?

Answer 1

In your helper that returns the cursor of values, instead of just doing a collection.find() do a collection.find().fetch() This will give you you an array of objects instead of a cursor. Then simply .forEach() through that an add an index key! Or you could just use collection.map() and add the key directly to each element as you map the cursor into an array. Docs