显示默认行KnockOut.js

Displaying default row KnockOut.js

本文关键字：js KnockOut 默认 显示      更新时间：2023-09-26

我知道我可以在knockout中使用注释foreach向列表添加条件。但是，如果 observableArray为空，我想添加一个默认行到表。

目前我这样做:

<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>

有更优雅的方式吗?

我同意0lukasz0的评论，并将在视图模型上执行computed property:

  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>

这样就不需要任何条件注释，只使用data-bind:

<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>

这个呢:

<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/

相关文章：