Wie wird No Data angezeigt, wenn das beobachtbare Array leer ist?

Question

Ich bin neu in Knockout.js und ich versuche, Daten von Observable Array zu einem table anzuzeigen. Das Problem, das ich habe, ist es generiert zwei tbody Tags. Aber wenn ich die leere Prüflogik in die foreach: Schleife verschiebe, wird die No Data überhaupt angezeigt.

Gibt es eine bessere Möglichkeit, dies mithilfe der Tabelle zu tun? Ich mag es in diesem Fall nicht ul oder ol zu verwenden.

<table> 
    <thead> 
     <tr> 
      <th>Permit</th> 
      <th>Region</th> 
      <th>Landowner</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: requestList"> 
     <tr> 
      <td><span data-bind="text: permit"></span></td> 
      <td><span data-bind="text: region"></span></td> 
      <td><span data-bind="text: landowner"></span></td> 
     </tr> 
    </tbody> 
    <tbody data-bind="if: requestList().length === 0"> 
     <tr> 
      <td colspan="3">No Data</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Dabei verwenden wir viel virtuelle Elemente. Sie sind hier skizzierte http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

Der Rest Ihrer Markup ist in Ordnung, aber man könnte Ihre erste tbody in einem virtuellen Element wie folgt wickeln:

<!-- ko if: requestList().length --> 
    <tbody data-bind="foreach: requestList"> 
     <tr> 
      <td><span data-bind="text: permit"></span></td> 
      <td><span data-bind="text: region"></span></td> 
      <td><span data-bind="text: landowner"></span></td> 
      <td><button data-bind="click: $parent.remove">Remove</button></td> 
     </tr> 
    </tbody> 
<!-- /ko --> 

JSFiddle hier: http://jsfiddle.net/ZKWMh/

Answer 2

Eigentlich ist Ihr HTML Markup in Ordnung. Ich fügte hinzu, die folgende Javascript Markup

$(document).ready(function() { 
    var a = [{ 
     permit: "permit1", 
     region: 'region1', 
     landowner: 'landowner'}, 
    { 
     permit: "permit2", 
     region: 'region2', 
     landowner: 'landowner2'}]; 
    var vm = {}; 
    vm.requestList = ko.observableArray([]); 

    ko.applyBindings(vm); 

    $('#loadData').click(function() { 
     var a1 = ko.mapping.fromJS(a); 
     var b1 = a1(); 
     vm.requestList(b1); 
    }); 
});​ 

Und es scheint zu funktionieren, wie Sie beschreiben, wie Sie wollen die Dinge zu arbeiten. Es arbeitet an http://jsfiddle.net/photo_tom/xmk3P/10/