在没有 viewModel 的情况下使用 ko.observableArrays答案

【问题标题】：Using ko.observableArrays without viewModel在没有 viewModel 的情况下使用 ko.observableArrays
【发布时间】：2017-03-13 17:20:38
【问题描述】：

我想在没有视图模型的情况下使用淘汰赛 observables。我只是想使用一个 observableArray 作为 DevExtreme 数据网格的数据源。所以现在，我的想法相当简单：我只是将一个变量 (shuttleList) 声明为空的 ko.observableArray。后来，我通过一个 ajax 请求来填充它。我的网格设置为该变量作为数据源。

但是，当我更改数组时，什么也没有发生。不过，我必须使用其选项方法手动替换网格的数据源。我做错了什么？

shuttleList = ko.observableArray([]);

$.getJSON('http://someCall?ID=' + id, function (e) {
    shuttleList(e.tourenList.find(x => x.title == 'Base').shuttleList);
});

var grid = $("#gridContainer").dxDataGrid({
    dataSource: shuttleList,
    …
});

我知道这不是淘汰赛应该使用的方式，但我能否以某种方式自动完成这项工作 - 无需在shuttleList.subscribe 事件中进行一些手动网格刷新？

顺便说一句，仅仅调用网格的 refresh()/repaint() 方法也无济于事。我还没有找到重置其 dataSource 选项的方法。

grid.option('dataSource', shuttleList);

非常感谢您的帮助！

【问题讨论】：

标签： javascript knockout.js devextreme

【解决方案1】：

我认为您所缺少的只是使用ko.applyBindings 初始化淘汰赛绑定，并且您可以在调用该函数时使用特定元素。 “视图模型”可以像对象括号一样简单，里面有你的变量：

ko.applyBindings({shuttleList}, document.getElementById("gridContainer"));

var shuttleList = ko.observableArray([]);
setTimeout(function(){shuttleList.push("success!")}, 1000);

ko.applyBindings({shuttleList}, document.getElementById("gridContainer"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<span>waiting for update...</span><br/>
<span id="gridContainer" data-bind="text: shuttleList"></span>

【讨论】：

如果这不起作用，那么问题可能出在 dxDataGrid 以及它是如何使用数据源的。我没有使用该控件的经验，所以如果这个答案没有帮助，请告诉我，我会删除它。

【解决方案2】：

我知道这不是淘汰赛应该使用的方式，但是我能以某种方式自动完成这项工作吗？无需手动操作在shuttleList.subscribe 事件中刷新网格？

让 KO 自动更新某些东西的唯一方法是创建依赖项自动。因此，在您的情况下，您可以创建匿名 computed ，这将取决于 shuttleList 可观察数组：

ko.computed(function(){
    grid.option('dataSource', shuttleList());
});

如您所见，可观察数组在此处被称为。这就是产生依赖的原因。现在在shuttleList 数组中所做的任何更改都将重新评估传递给computed 的函数，并且网格的数据源将被更新。

但它似乎不是最佳解决方案，因为即使推送单个值也会导致整个网格呈现。但是，如果您的数据不包含太多行，那么这种方法会很好用。

此外还有另一个缺点 - 由于 computed 创建单向依赖关系，您无法使用网格的 API 方法反映 shuttleList 数组的更改。

【讨论】：