Làm thế nào để hiển thị Không có Dữ liệu khi mảng quan sát được trống?

Question

Tôi mới sử dụng Knockout.js và tôi đang cố gắng hiển thị dữ liệu từ mảng quan sát được tới một số table. Vấn đề tôi gặp phải là tạo ra hai thẻ tbody. Nhưng nếu tôi di chuyển lô kiểm tra trống vào vòng lặp foreach:, thì hoàn toàn không hiển thị No Data.

Có cách nào tốt hơn để thực hiện việc này bằng bảng không? Tôi không thích sử dụng ul hoặc ol trong trường hợp này.

<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

Khi thực hiện việc này, chúng tôi sử dụng rất nhiều yếu tố ảo. Chúng được nêu ở đây http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

Phần còn lại của đánh dấu của bạn là tốt, nhưng bạn có thể quấn tbody đầu tiên của bạn trong một phần tử ảo như thế này:

<!-- 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 đây: http://jsfiddle.net/ZKWMh/

Answer 2

Thực ra, đánh dấu html của bạn vẫn ổn. Tôi đã thêm javascript sau vào đánh dấu của bạn

$(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); 
    }); 
});​ 

Và có vẻ như bạn đang làm việc như bạn mô tả cách bạn muốn mọi thứ hoạt động. Nó đang làm việc tại http://jsfiddle.net/photo_tom/xmk3P/10/