javascript - 重置可观察的表单字段 Knockout

Question

在我的 MVC 项目中，我有一个包含 3 个表单和一个 KO ViewModel 的 View 。

在每个表单上我都有一个重置按钮来清除它自己的字段。

我不能使用 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..
}

但我正在寻找一个更全局化、更短的解决方案。

我在网上做了很多研究，但找不到好的解决方案。

非常感谢任何帮助。

Answer 1

如果您可以对表单的字段进行分组，则可以在每个表单上使用 with 绑定(bind)来提供不同的 context到表单成员，因此附加到重置按钮的 reset 函数(作为点击处理程序)将只查看其自身表单的可观察对象。

如果您不能对字段进行分组，(不太优选的)可能性是遍历包含重置按钮的表单的绑定(bind)元素，重置它们的值，并为它们触发更改事件。我的代码段中注释掉的代码可以做到这一点。

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>