javascript - 在没有 viewModel 的情况下使用 ko.observable 数组

Question

我想在没有 View 模型的情况下使用 knockout 可观察量。我只是想使用一个 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,
    …
});

我知道这不是 knockout 应该使用的方式，但是我可以以某种方式使其自动工作 - 而无需在shuttleList.subscribe事件中进行一些手动网格刷新吗？

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

grid.option('dataSource', shuttleList);

预先非常感谢您的帮助!

Answer 1

我认为您所缺少的只是使用 ko.applyBindings 初始化 knockout 绑定(bind)，并且您可以在调用该函数时使用特定元素。 “ View 模型”可以像对象括号一样简单，其中包含变量:

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>