如何在 observableArray 发生变化时自动更新 UI？

Question

您好，我有以下使用 knockout.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

首先，您要更新的数组不是可观察数组。其次，您的成功回调实际上会覆盖数组。最后，您没有保留对 viewModel 的引用，因此您无法正确更新可观察数组。 ObservableArray 包装真实数组以使它们可观察。所有 add 的 remove 等都需要通过 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 中，这样它就不会污染全局命名空间并保持封装。

希望这会有所帮助。