0

我有一个名为 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" />

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

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

谢谢大家！

4

2 回答 2

2

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

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

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();
    }
}
于 2013-11-06T18:26:28.330 回答
1

使用具有默认值的简单 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 对象。

于 2013-11-06T19:39:00.690 回答