淘汰赛js绑定不更新

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 绑定每个 observable，所以旧的 observable 数组仍然被绑定 - 新的（未绑定的）observable 数组无法影响 UI。

一种方法是清空 original 可观察数组。在这种情况下，可以使用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([]);
    });
};

---

另一种方法是使用 observable 间接层并重新绑定外部 observable。在这种情况下不一定需要这样做，为了完整起见，包括以下部分。

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。使用间接可观察对象的相同方法也可以在每个数组上完成，然后它看起来像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([]));
     };
}

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