8

我是 Knockout.js 的新手，我正在尝试将数据从可观察数组显示到table. 我遇到的问题是它会生成两个tbody标签。但是，如果我将空检查逻辑移到foreach:循环中，则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>
4

2 回答 2

8

这样做时，我们会大量使用虚拟元素。它们在此处进行了概述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-20T06:14:01.833 回答
0

实际上，您的 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-20T01:36:55.167 回答