Data binding 如何在可观察页面发生变化时自动更新UI？

您好，我有以下使用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反映它

我如何做到这一点

编辑

---

在上面的代码中，我将数组本身设置为可观察数组，并尝试在数组发生任何更改时自动更新UI。如何实现它？

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

---

希望这有帮助。

初始化后如何更改allJobberDetailsArray？我正在成功下更改它：functiondata{allJobberDetailsArray=data；}它工作正常，但我想让initialArray本身可见这可能吗？因此，对initialArray的任何更改都必须反映在UIThanks中感谢您的帮助我这样做使initialArray可见并将数据推入其中，再次感谢：

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