Knockout table binding with collapsing row

Question

I have a table that is bound to an knockout observableArray:

<table class="table table-hover table-condensed">
    <tbody data-bind="foreach: screens">
    <tr data-toggle="collapse" href="#collapse"> // how can i bind the individual id?
        <td><span data-bind="text: computerName"></span>
            <!-- ko if: supporter -->
            <span class="label label-primary">S</span>
            <!-- /ko -->
        </td>
        <td data-bind="text: computerKennung"></td>
        <td data-bind="text: nummer"></td>
    <tr>
    <tr data-bind="attr: { id: 'collapse' + oid}" class="collapse">
        <td colspan="3">
            <button class="btn btn-primary" data-bind="click: edit">Edit</button>
            <button class="btn btn-primary" data-bind="click: delete">Delete</button>
        </td>
    </tr>
    </tbody>
</table>

Every row should be clickable and collapse an additional row below, where i have buttons for actions. According to the bootstrap samples i need an id, which is called in the href-Target. But every row has a different oid and i don't know how many items are in the array.

Can i bind the href-Target via Knockout in any way? Is there a better way for collapsing a table row with unknown ids?

you can have dynamic id like this attr:{id:$index()} & href like this attr:{href:$index()} . hope that helps — super cool
similar stuff i feel you expecting stackoverflow.com/questions/27396970/… . cheers — super cool

James Thorpe James Thorpe · Accepted Answer · 2015-08-14T09:40:58

You can bind the href in the same manner as you're binding the id on the second row using the attr binding:

<tr data-toggle="collapse" data-bind="attr: { href: '#collapse' + oid }">

Knockout table binding with collapsing row

1 Answers