Question

我有一个名为Index的对象：

function Index() {
    var self = this;
    self.name = ko.observable("Kiwanax");
}

我有一个像这样的ViewModel：

function IndexViewModel() {

    var self = this;
    var index = new Index();

    self.content = index;
    self.default = index;
}
ko.applyBindings(new IndexViewModel());


//-------------------------------------------
<input type="text" data-bind="text: content.name" />

关键是：在某些时候，我想将表单重置为默认值。这意味着将当前viewmodel值更改为默认变量值。但我不知道如何做到这一点。

self.resetForm = function() {
    // How to update the current content variable to default variable values?
    // I think in something like that below:

    self.content = self.default;
}

全部谢谢！

Answer 1

表单不显示任何内容，因为您应该使用值绑定输入。

至于默认值，我的建议是制作一个扩展器：

ko.extenders.defaultValue = function(target, option){
    target.reset = function(){
        target(option);
    }        
    return target;
}

并像这样使用它：

self.name = ko.observable("Kiwanax").extend({defaultValue:"defaultValue"});

要重置为默认呼叫：

self.name.reset();

摆弄所有代码：http://jsfiddle.net/25ECB/3/

编辑：要控制很多字段，你可以使用ko映射并使用create选项添加扩展器，但我更喜欢下面的实现，因为它允许一个简单的resetAll（更新的小提琴：http://jsfiddle.net/25ECB/6/ ）。

function Index() {
    var self = this;
    var lotsOfProps = [
        {
            name:"name1",
            value:"initialValue1",
        },
        {
            name:"name2",
            value:"initialValue2",
        },      
        {
            name:"name3",
            value:"initialValue3",
        }                
        ];

    ko.utils.arrayForEach(lotsOfProps, function(prop){
        self[prop.name] = ko.observable(prop.value).extend({defaultValue:prop.value});
    });
    //self.name = ko.observable("Kiwanax").extend({defaultValue:"defaultValue"});

    self.resetAll = function(){
        ko.utils.arrayForEach(lotsOfProps, function(prop){
            self[prop.name].reset();
        })
    }
}


function IndexViewModel() {

    var self = this;
    var index = new Index();

    self.content = index;

    self.resetForm = function() {
        // How to update the current content variable to default variable values?
        // I think in something like that below:
        self.content.resetAll();
    }
}

Answer 2

使用具有默认值的简单js对象：

function Index(data) {
   var self = this;
   self.name = ko.observable(data.name);
}

function IndexViewModel() {
    var self = this;
    self.defaultData = {name: "Kiwanax"};
    self.index = new Index(defaultData);

    self.resetForm = function() {
        self.index = new Index(defaultData);
    }
}

调用resetForm时，只需使用默认数据重新创建Index对象。

如何将ViewModel重置为默认值

2 个答案: