CODEWITHSUNDEEP
javascriptarraysknockout.jsdata-binding
alik
alik

Reputation: 2374

Table with dynamic columns between first and last column in knockout.js

I would like something like this:

<table>
    <thead>
        <tr>
            <th>Module</th>

            <!-- foreach: months -->
            <th data-bind="text: month"></th>

            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Invoices</th>

            <!-- foreach: months -->
            <td data-bind="text: invoice.amount"></td>

            <th data-bind="text: invoicesTotal"></th>
        </tr>

        <tr>
            <th>Taxes</th>

            <!-- foreach: months -->
            <td data-bind="text: tax.amount"></td>

            <th data-bind="text: taxesTotal"></th>
        </tr>
    </tbody>
</table>

I am aware how to bind columns to an array if all the columns comes from an array, but in this case, I would prefer that the first and the last column is defined outside of the months array.

I have failed to find a way how to iterate months in this case (how and on which element to define the foreach binding).

Note: Even grids might sound ok for this, they do not fit the final scenario.

Upvotes: 0

Views: 99

Answers (1)

dfperry
dfperry

Reputation: 2258

You're missing the closing pseudo-tag, if what you have isn't working:

<!-- ko foreach: months -->
<th data-bind="text: month"></th>
<!-- /ko -->

see http://knockoutjs.com/documentation/foreach-binding.html

Upvotes: 1

Related Questions