顯示默認行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/