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

 摩羯参议院1314 发布于 2022-12-29 09:43

让我们说我有以下简化和通用视图模型,它使用KnockoutJS和Knockout Validation库分别创建/操作和验证observable.

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

我感兴趣的是,如果我想创建一个"重置"程序来清除视图模型的大多数成员(其中可能有很多),并保留少数字段,那么是什么我能做到最可维护的方式吗?更具体地说,将availableParentNodes对象视为我想要保留的可观察对象之一,同时associatedParentNode必须清除(如,self.associatedParentNode(undefined)),并且必须将一半(未声明的)模型成员childProperties设置为null,作为一部分重置过程.

SO和搜索引擎查询建议手动清除每个可观察/变量,或者ChildNode仅创建新视图模型(在本例中为视图模型)以替换旧视图模型.由于我有特定的字段,我想保留,后者不是一个选项,因为这些模型中有很多可观察的,前者是不可维护的.

1 个回答
  • 一个选项是创建一个通用的重置函数,其中包含您想要保留的可观察对象的白名单参数.这是一个例子(indexOf如果你需要支持过时的浏览器,请填充polyfill ):

    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' ] );
    };
    

    上面将设置每个可观察的除了名称somethingsomethingElse模型中的可观察到的undefined.

    这是一个JSFiddle示例.

    2022-12-29 09:46 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有