两次绑定到相同的数据在淘汰赛中第二次不起作用答案

【问题标题】：Binding to the same data twice doesn't work the second time in knockout两次绑定到相同的数据在淘汰赛中第二次不起作用
【发布时间】：2013-02-06 13:58:40
【问题描述】：

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

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

这是由于我自己对淘汰赛的基本误解，还是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);
});

【问题讨论】：

标签： knockout.js jqxgrid jqxwidgets

【解决方案1】：

问题出在source : Stuff().People 的某个地方，因为您在此处显式获取了Stuff 可观察对象的值并访问了它的People 属性。更改 Stuff 本身不会更改 this 绑定的 observable 数组。

但是，有一个整体更优雅的解决方案，您也不必将 dataFromServer 本身设为 observable：

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

});

Forked JSFiddle

【讨论】：

我很难决定是否应该批准您的答案或马特的答案，但最终，马特的答案是首先解决问题。马特的回答也让我自己朝着你的答案方向前进，所以即使你的回答更彻底，我还是把分数给了马特。希望你能理解。

【解决方案2】：

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

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

效果很好。当然，这会完全隐藏您的网格，直到您单击加载。

Fiddle

【讨论】：

你好！如果有人可以解释为什么这可以解决问题，那就太酷了。在我给你答案之前，让我考虑一下其中的含义。
似乎Stuff().People 绑定到您的网格然后直到Stuff().People 存在才发生（另见我的回答）。但我怀疑如果您再次分配Stuff(data)，这将起作用。
好的，试过了，还是可以的。我仍然不确定，当确切地发生绑定时，但看起来在这种情况下它们会被重新评估。
这里发生的一件事是当if 被重新评估为真时（即Stuff().People 为真 - 即它存在），剔除将重新创建它所包含的 DOM 元素。