javascript - knockout 计算在单个 Action 上多次触发

Question

我在处理但未构建的软件时遇到了 knockout 问题。当几乎任何字段被编辑时，相关页面都会执行自动保存。该页面显示多个测试问题，每个问题都有关联的响应(答案)。自动保存是用一个脏标志实现的，该标志将对象的当前状态与初始状态进行比较。

我看到的症状是，当第一次访问该页面并添加一个新问题时，会导致为 1 个新问题调用 1 个 api(这是正确的)。如果我导航到另一个页面并返回到相同的测试(或不同的测试)，所有 api 调用都会重复。如果我再次重复同样的事情，就会进行 3 次调用(完全相同)。我的理论是，离开页面时 VM/observable 中的某些内容没有正确取消设置。我对此进行了很多调试，我认为没有多个不同的操作触发保存，但是 1 个操作导致触发计算函数，每次打开任何测试时都会触发自动保存。刷新浏览器会导致这个不可见的计数器重置。

有两个计算函数

self.dirtyQuestions = ko.computed(function() {
  return ko.utils.arrayFilter(self.current.assessmentItems(), function(question) {
    return question.dirtyFlag.isDirty();
  });
}, self).extend({ throttle: 250 });

self.triggerDirtyQuestionSave = ko.computed(function() {
  if (!CONFIG.editing.autoSave) {
    return;
  }
  if (self.dirtyQuestions().length > 0) {
    self.saveQuestions(self.dirtyQuestions(), true);
  }
}, self);

这似乎完全依赖于一个可观察的数组

  assessmentItems: ko.observableArray([]),

这是一个对象，有许多与之相关的可观察变量。如果修改其中任何一项或推送新项目，则会在上面的两个计算中触发自动保存。在调试时，我看到这些都在离开并重新访问页面后被多次触发，但我在 assessmentItems 可观察到的元素修改上的所有断点只会触发一次。

我的具体问题是，如何确定页面/VM/observablearray 的某些内容在离开页面后是否持续存在，这会在离开和返回页面时导致累积，这可能会解释这些重复的触发器？该页面有点乱，但也相当复杂，因此我试图避免重写它或删除所有自动保存功能。

--更新

路由表条目

        create: {
      enter: [
        checkForUnsavedChanges,
        function () {
          self.closeOverlay();
      }],
      to: function() {
        assessmentAuthoringVM = new AssessmentAuthoringVM(self);
      },
      exit: function() {
        if (assessmentAuthoringVM) {
          assessmentAuthoringVM.destroy();
        }
      }
    },

Answer 1

在“页面”关闭时运行的函数中，您应该添加调用以“处理”计算的可观察对象:

destroy: function () {
    self.triggerDirtyQuestionSave.dispose();
    self.dirtyQuestions.dispose();
}