How to display No Data when observable array is empty?

Question

I\'m new to Knockout.js and I\'m trying to display data from observable array to a table. The problem I have is it generates two tbody tags. But if

Answer 1

When doing this we make a lot of use of virtual elements. They are outlined here http://knockoutjs.com/documentation/if-binding.html#note_using_if_without_a_container_element

The rest of your markup is fine, but you could wrap your first tbody in a virtual element like this:

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

Answer 2

Actually, your html markup is fine. I added the following javascript to your 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);
    });
});​

And it seems to be working as you describe how you want things to work. It is working at http://jsfiddle.net/photo_tom/xmk3P/10/