0

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?

Siguza
  • 21,155
  • 6
  • 52
  • 89
Daniel
  • 511
  • 10
  • 25
  • you can have dynamic id like this `attr:{id:$index()}` & href like this `attr:{href:$index()}` . hope that helps – super cool Aug 14 '15 at 09:40
  • similar stuff i feel you expecting http://stackoverflow.com/questions/27396970/auto-generate-div-ids-for-bootstrap-accordion-menu-binding-with-knockout-js/27397592#27397592 . cheers – super cool Aug 14 '15 at 09:44

1 Answers1

1

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 }">
James Thorpe
  • 31,411
  • 5
  • 72
  • 93
  • That's it! Thank you! Now i still have to figure out how to collapse in all other collapsed rows... – Daniel Aug 14 '15 at 09:51