如何在可观察数组发生变化的情况下自动更新 UI

Question

你好，我有以下使用挖空的代码.js，

var allJobberDetailsArray = [];
getAllJobberDetailsArray();
function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                allJobberDetailsArray = data;
            }
        });
    })
}
// ViewModel
function JobberCheckBoxListUserControlViewModel() {
    var self = this;
    self.allJobberDetailsArray = ko.observableArray(allJobberDetailsArray);
}
ko.applyBindings(new JobberCheckBoxListUserControlViewModel());

对 allJobberDetailsArray 的任何更改我想自动更新 UI，说添加或删除了数组项，我希望 UI 反映它。

我该如何实现它？

编辑

var allJobberDetailsArray = ko.observableArray();
getAllJobberDetailsArray();
function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                allJobberDetailsArray.removeAll();
                allJobberDetailsArray.push(data);
            },
        });
    })
}
// ViewModel
function JobberCheckBoxListUserControlViewModel() {
    var self = this;
    self.allJobberDetailsArray = allJobberDetailsArray;// allJobberDetailsArray is now observable but any change to this doesn't reflect in the UI
}
var viewModel = new JobberCheckBoxListUserControlViewModel();
ko.applyBindings(viewModel);

在上面的代码中，我使数组本身可观察，并尝试自动更新 UI，如果数组有任何更改，我该如何实现？

Answer 1

首先，您要更新的数组不是可观察的数组。其次，您的成功回调实际上会覆盖数组。最后，您不保留对视图模型的引用，因此无法正确更新可观察数组。ObservableArray 包装实数组以使它们可观察。所有添加的删除等都需要通过可观察数组，以便可以通知订阅者。

试试这个。

// ViewModel
function JobberCheckBoxListUserControlViewModel(initialArray) {
    var self = this;
    self.allJobberDetailsArray = ko.observableArray(initialArray || []);
}
var viewModel = new JobberCheckBoxListUserControlViewModel();
function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                viewModel.allJobberDetailsArray(data);
            }
        });
    })
}
ko.applyBindings(viewModel);

我还建议重构以将 getAllJobberDetailsArray 方法放入 viewModel 中，这样它就不会破坏全局命名空间并保持封装。

希望这有帮助。