如何在可观察数组为空时显示No Data？

我是Knockout.js的新手，我试图将数据从可观察数组显示到table。我遇到的问题是它会生成两个tbody标签。但是如果我将空的检查逻辑移动到foreach:循环中，那么No Data根本就不会显示出来。如何在可观察数组为空时显示No Data？

有没有更好的方法来做到这一点使用表？在这种情况下，我不喜欢使用ul或ol。

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

来源

2012-12-20 Ray Cheng

正常工作对我来说： http://jsfiddle.net/tyrsius/4jdxk/ – Tyrsius

@Tyrsius，我的标记可以显示。但是在渲染后，如果你看DOM，在table下有两个'tbody'标签。我不认为这是有效的HTML。不是吗？我只想在'table'标签下生成一个'tbody'标签。 –

当我们这样做时，我们大量使用虚拟元素。他们在这里http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

您的标记的其余部分是好的概括，但你可以换你的第一个TBODY在这样一个虚拟的元素：

<!-- 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这里：http://jsfiddle.net/ZKWMh/

来源

2012-12-20 06:14:01

谢谢！我想知道这样的事情应该存在。我们不能只将'if'条件检查始终放在HTML标记中。 –

没问题。它也适用于''''，'foreach'和其他一些绑定，这可能非常有用。 –

其实，你的html标记是好的。我在您的标记中添加了以下javascript

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

而且它似乎在描述您希望如何工作。它在http://jsfiddle.net/photo_tom/xmk3P/10/

来源

2012-12-20 01:36:55

我的标记可以显示。但是在渲染后，如果你看DOM，在table下有两个'tbody'标签。我不认为这是有效的HTML。不是吗？我只想在'table'标签下生成一个'tbody'标签。 –

如何在可观察数组为空时显示No Data？

回答

相关问题