Binding to the same data twice doesn't work the second time in knockout

Question

I submit for your consideration, this fiddle: http://jsfiddle.net/alexdresko/HFFUL/5/

There are two identical grids in the HTML, but only one of them populates when you click the "Load" button.

Is this due to my own fundamental misunderstanding of knockout, or is it a jqxgrid problem?

Here's the code:

<a href="#" data-bind="click: load">Load</a>

<div class="aGrid" data-bind="jqxGrid: { source: Stuff().People, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>
<div class="aGrid" data-bind="jqxGrid: { source: Stuff().People, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>

var dataFromServer = {
    People: ko.observableArray([{
        Name: "George"
    }, {
        Name: "Scot"
    }])
};

var viewModel = function () {

    this.Stuff = ko.observable({});
    this.load = function () {
        this.Stuff(dataFromServer);

    };
};

$(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);
});

Answer 1

Not sure about the cause, but when I wrapped your two grids in a div like this:

<div data-bind="if: Stuff().People">

It worked fine. Of course, this hides your grids altogether until you click load.

Fiddle