重置可观测的表单字段
重置可观测的表单字段
提问于 2016-08-23 11:47:45
在我的MVC项目中，我有一个带有3种表单和一个KO ViewModel的视图。
在每个表单上，我都有一个重置按钮来清除它自己的字段。
我不能使用input type="reset"，因为它不会更新可观察到的值。
我既不能重置View Model，因为这将重置所有的，View Model的可观察性，而我只需要重置触发重置的表单上的。
我可以编写3个函数，每个表单一个函数，手动删除每个表单字段，如下所示：
this.onForm1Reset = function () {
this.field1('');
this.field2('');
//etc..
}
this.onForm2Reset = function () {
this.field3('');
this.field4('');
//etc..
}
this.onForm3Reset = function () {
this.field5('');
this.field6('');
//etc..
}但我正在寻找一个更全球化和更短的解决方案。
我在网上做了很多研究，但没有找到一个很好的解决办法。
任何帮助都将不胜感激。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-08-23 18:02:35
如果可以对表单的字段进行分组，则可以在每个窗体上使用with绑定来向表单成员提供不同的上下文，因此连接到重置按钮的reset函数(作为单击处理程序)将只查看其自身窗体的可观察性。
如果无法对字段进行分组，则可能会运行包含重置按钮的表单的绑定元素，重置它们的值，并为它们触发更改事件。我的代码片段中注释掉的代码就能做到这一点。
vm = {
fieldset1: {
field0: ko.observable(),
field1: ko.observable()
},
fieldset2: {
field2: ko.observable(),
field3: ko.observable()
},
fieldset3: {
field4: ko.observable(),
field5: ko.observable()
},
reset: function(data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
data[key]('');
}
}
};
ko.applyBindings(vm);
/*
$('body').on('click', '[type="reset"]', function() {
$(this.parentNode).find('[data-bind*="value:"]').each((index, item) => {
$(item).val('').change();
});
});
*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form data-bind="with: fieldset1">
<input data-bind="value:field0" />
<input data-bind="value:field1" />
<input type="reset" data-bind="click: $parent.reset" />
</form>
<form data-bind="with: fieldset2">
<input data-bind="value:field2" />
<input data-bind="value:field3" />
<input type="reset" data-bind="click: $parent.reset" />
</form>
<form data-bind="with: fieldset3">
<input data-bind="value:field4" />
<input data-bind="value:field5" />
<input type="reset" data-bind="click: $parent.reset" />
</form>
Stack Overflow用户
发布于 2016-08-23 11:57:02
一个更实际的解决方案是将您的视图模型包含在一个可观察的模型中，并在重置时重新创建该模型：
function MyViewModel()
{
this.field1 = ko.observable();
this.field2 = ko.observable();
// etc...
}
var model = {
data: ko.observable(new MyViewModel()),
reset: function() {
model.data(new MyViewModel());
}
};
ko.applyBindings(model);在HTML中：
<body data-bind="with: data">
...
<button data-bind="click: $root.reset">Reset</button>
</body>请参阅小提琴
更新(根据您的评论)：
由于您不想替换整个视图模型，而只想重置某些字段，所以我假设您必须在模型中引入一个reset()方法：
function MyViewModel()
{
this.field1 = ko.observable();
this.field2 = ko.observable();
this.reset = function() {
this.field1('');
this.field2('');
}.bind(this);
}
ko.applyBindings(new MyViewModel());在HTML中：
<button data-bind="click: reset">Reset</button>Stack Overflow用户
发布于 2016-08-23 12:33:26
您还可以考虑将ViewModel拆分为每个表单(字段组)中的一个单独的VM。
使用这种方法，您可以通过重新创建相应的ViewModel来重置表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39100330
复制相关文章
相似问题
腾讯云开发者
