knockout.js - 两次绑定到相同的数据在淘汰赛中第二次不起作用

Question

我提交供您考虑，这个小提琴：http: //jsfiddle.net/alexdresko/HFFUL/5/

HTML 中有两个相同的网格，但是当您单击“加载”按钮时，只会填充其中一个。

这是我自己对knockout的根本误解，还是jqxgrid的问题？

这是代码：

<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

问题出在某个地方，因为您在此处source : Stuff().People明确获取可观察对象的值Stuff并访问其People属性。改变Stuff自身不会改变这个绑定的 observable 数组。

但是，有一个整体更优雅的解决方案，您也不必自己制作dataFromServer可观察的：

HTML：

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

JavaScript：

var dataFromServer = [{
        Name: "George"
    }, {
        Name: "Scot"
    }];

var viewModel = function () {

    this.Stuff = { People: ko.observableArray([]) }
    this.load = function () {
        for (i=0; i < dataFromServer.length; ++i) {
            this.Stuff.People.push(dataFromServer[i]);
        }

    };
};


$(function () {

    var vm = new viewModel();
    ko.applyBindings(vm);

});

分叉的 JSFiddle

Answer 2

不确定原因，但是当我将您的两个网格包装在这样的 div 中时：

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

它工作得很好。当然，这会完全隐藏您的网格，直到您单击加载。

小提琴