Question

我有一个视图模型，其中包含对另一个对象的引用，并且引用的对象绑定到我的UI。当我将对象添加到可观察数组但在清除数组时似乎没有更新时，绑定似乎工作正常。

我已经转载了这个问题是jsfiddle，我想知道是否有人可以指出我正确的方向？

http://jsfiddle.net/chriswnichols/gcywcce7/

function County(name) {
    this.Name = name;
}

function ListCriteria() {
    var self = this;
    self.States = ko.observableArray([]);
    self.Counties = ko.observableArray([]);
    self.Zips = ko.observableArray([]);
    self.Cities = ko.observableArray([]);
    self.DobRanges = ko.observableArray([]);
    self.Clear = function () {
        self.States = ko.observableArray([]);
        self.Counties = ko.observableArray([]);
        self.Zips = ko.observableArray([]);
        self.Cities = ko.observableArray([]);
        self.DobRanges = ko.observableArray([]);
    };
}

var ViewModel = function () {
    var listCriteria = new ListCriteria(),
        reset = ko.computed(function () {
            listCriteria.Clear();
        });
    return {
        listCriteria: listCriteria,
        reset: reset
    }
};
viewModel = new ViewModel();
ko.applyBindings(viewModel);

感谢。

Answer 1

它不起作用，因为正在创建 new 可观察数组。 KO绑定 per observable ，因此旧的可观察数组仍然绑定 - 新的（未绑定）可观察数组无法影响UI。

一种方法是清空原始可观察数组。在这种情况下，可以使用ObservableArray.removeAll：

完成

self.Clear = function () {
    [self.States, self.Counties, self.Zips].forEach(function (arr) {
        arr.removeAll();
        // Alternative, because it updates the observable with an empty array
        // (without creating a new unbound observable)
        // arr([]);
    });
};

另一种方法是使用可观察的间接层并重新绑定外部可观察对象。在这种情况下，不一定要求这样做，并且为了完整性，包括以下部分。

var ViewModel = function () {
    var listObs = ko.observable(new ListCriteria());
    return {
        listCriteria: listObs,
        // This probably shouldn't be a computed.. data-bind as "click: reset"
        reset: function () {
            // Assign a new value to existing (and bound) observable
            listObs(new ListCriteria());
        }
    }
}

然后它可能被数据绑定为foreach: listCriteria().Counties。使用间接observable的相同方法也可以在每个数组上完成，然后它看起来像foreach: listCriteria.States()，虽然在这种情况下这很愚蠢，考虑到它包装了一个可观察的数组。

function ListCriteria() {
    var self = this;
     self.States = ko.observable(ko.observableArray([]));
     self.Clear = function () {
         // Mutate existing observable, assigning an observable as a value
         self.States(ko.observableArray([]));
     };
}

但是，问题的解决方案在所有情况下都是相同的：仅使用可观察对象的突变来影响绑定数据。

Knockout js绑定不更新

1 个答案: