javascript - Knockout js 绑定(bind)未更新

Question

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

我已经重现了 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

它不起作用，因为正在创建新可观察数组。 KO 绑定(bind)每个 observable，因此旧的 observable 数组仍然被绑定(bind) - 新的(未绑定(bind)的)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([]);
    });
};

<小时/>

另一种方法是使用可观察间接层并重新绑定(bind)外部可观察。在本例中不一定需要这样做，为了完整性而包含以下部分。

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());
        }
    }
}

然后可以将其数据绑定(bind)为 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([]));
     };
}

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