显示默认行KnockOut.js

Question

我知道我可以在注释中使用注释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> 

是否有一个更优雅的方式？

Answer 1

我同意0lukasz0注释，会做视图模型计算性能：

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> 

Answer 2

像这样将消除需要任何条件注释，只使用数据绑定：

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

Answer 3

这个怎么样：

上的jsfiddle

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

证明：http://jsfiddle.net/fkQQ2/