javascript - Knockout View 模型重置——当 Observables 需要默认值时

Question

假设我有以下简化的通用 View 模型，它使用 KnockoutJS 和 Knockout Validation library分别创建/操作和验证可观察对象。

// view declared

// KnockoutJS loaded
// KnockoutValidation loaded

var ChildNodePropertiesVM = function(properties) {
    var self = this;

    /* data within properties object are assigned to
       observables within VM */
};

var ChildNode = function() {
    var self = this;
    var options = // data from ajax request sent to web service

    // list of POJOs
    this.availableParentNodes = ko.observableArray();

    // a specific POJO from the list above, selected from an HTML select element
    // Knockout Validation ensures that a value is present (required)
    this.associatedParentNode = ko.observable().extend({
        required: {
            params: true,
            message: "Please choose a parent"
        }
    });

    // a view model, declared above, constructed with value from options
    this.childProperties = new ChildNodePropertiesVM(options.childProps);

    /* Many more model-members follow, and may be any of the above types
       (observable, observableArray, view model, etc) */
};

// apply bindings to view here (in this case, ko.applyBindingsWithValidation)

我感兴趣的是，如果我想创建一个“重置”过程来清除 View 模型的大部分成员(其中可能有很多)，并保持少数字段不变，我可以这样做的最可维护的方式是什么？更具体地说，将 availableParentNodes 对象视为我想保留的可观察对象之一，而 associatedParentNode 必须被清除(如 self. associatedParentNode(undefined)) 以及 childProperties 的一半(未声明)模型成员必须设置为 null，作为重置过程的一部分。

SO 和搜索引擎查询要么建议手动清除每个可观察变量/变量，要么简单地创建一个新 View 模型(在本例中为 ChildNode View 模型)来替换旧 View 模型.由于我有特定的字段想要保留，因此后者不是一个选项，并且由于这些模型中有太多可观察值，因此前者无法维护。

Answer 1

一个选项是创建一个通用的重置函数，为您想要保留的可观察对象提供一个白名单参数。下面是一个例子(polyfill indexOf 如果你需要支持过时的浏览器):

var reset = function ( obj, whitelist ) {
    for ( var prop in obj ) {
        if ( obj.hasOwnProperty( prop ) && ko.isObservable( obj[ prop ] ) && whitelist.indexOf( prop ) === -1 ) {
            obj[ prop ]( undefined );
        }
    }
};

然后你可以在你的个人模型上用你的白名单来套用这个函数。

SomeModel.prototype.reset = function () {
    reset( this, [ 'something', 'somethingElse' ] );
};

上面的代码会将模型中名为 something 和 somethingElse 的每个可观察对象设置为 undefined。

这是一个 JSFiddle example .