Question

我想在没有viewmodel的情况下使用knockout observable。我只想使用一个observableArray作为DevExtreme数据网格的数据源。所以现在，我的想法很简单：我只是将一个变量（shuttleList）声明为空ko.observableArray。后来，我通过ajax请求填写了这个。我的网格被设置为该变量作为数据源。

但是，当我更改阵列时，没有任何反应。但是，我必须使用其选项方法手动替换网格的dataSource。我做错了什么？

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

非常感谢您的帮助！

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

Answer 2

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

让KO自动更新的唯一方法是创建依赖关系。因此，在您的情况下，您可以创建依赖于computed可观察数组的匿名shuttleList：

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

正如您所看到的那样，可观察数组被称为。是什么造成了依赖。现在，在shuttleList数组中所做的任何更改都将重新评估传递给computed的函数，并且网格的dataSource将会更新。

然而，它似乎并不是最佳解决方案，因为推送单个值将导致整个网格呈现。但是，如果您的数据不包含太多行，那么这种方法就可以正常工作。

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

使用没有viewModel的{ko.observableArrays

2 个答案: