Displaying default row KnockOut.js

Question

I know that I can use the comment foreach in knockout to add conditions to lists. But I would like to add a default row to the table if the observableArray is empty.

Currently I do something like this:

<table>
    <!-- ko foreach: members -->
    <tr>
        <td data-bind="text: Id"></td>
        <td data-bind="text: FirstName"></td>
        <td data-bind="text: LastName"></td>
    </tr>
    <!-- /ko -->
    <tr data-bind="if: MemberCount == 0">
        <td colspan="3">
            No members have been added yet
         </td>
    </tr>
</table>

Is there a more elegant way?

looks ok, I would hide membercount == 0 as isEmpty property. Bearing in mind that you can not do conditions within foreach It is good approach. — 0lukasz0, Jun 03 '13 at 18:17

score 4 · Accepted Answer · answered Jun 03 '13 at 18:55

I agree with 0lukasz0 comment and would do computed property on the view model:

  model.hasNoMembers = ko.computed(function(){
    return model.members().length === 0;
  });

Html:

<table>
    <!-- ko foreach: members -->
    <tr>
        <td data-bind="text: Id"></td>
        <td data-bind="text: FirstName"></td>
        <td data-bind="text: LastName"></td>
    </tr>
    <!-- /ko -->
    <tr data-bind="if: hasNoMembers">
        <td colspan="3">
            No members have been added yet
         </td>
    </tr>
</table>

score 3 · Answer 2 · answered Jun 03 '13 at 18:51

Something like this would remove the need for any conditional comments, using data-bind only:

<tbody data-bind="foreach: members">
  <tr>
    <td data-bind="text: Id"></td>
    <td data-bind="text: FirstName"></td>
    <td data-bind="text: LastName"></td>
  </tr>
</tbody>
<tfoot data-bind="if: (memberCount == 0)">
 <tr>
    <td colspan="3">
        No members have been added yet
     </td>
</tr>
</tfoot>

Vladimir Posvistelik · Answer 3 · 2013-06-03T20:11:15.027

1

What about this:

<table>           
    <tbody data-bind="foreach: members"> 
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
        </tr>
    </tbody>   

    <tbody data-bind="if: members().length == 0">
        <tr>
            <td colspan="3">No members have been added yet</td>
        </tr>
    </tbody>    
</table>

Proof on jsFiddle: http://jsfiddle.net/fkQQ2/

edited Jun 03 '13 at 20:11

answered Jun 03 '13 at 19:46

Vladimir Posvistelik

3,843
24
28

I don't think it's valid html to have two `` tags in a table. – Mike B Jun 03 '13 at 20:44
1

@MichaelBerkompas, I think it's possible - http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table – Vladimir Posvistelik Jun 04 '13 at 07:38
1

@Michael Berkompas two theads are not valid, you could have as many tbody as you like – 0lukasz0 Jun 04 '13 at 20:03

Displaying default row KnockOut.js

3 Answers3