javascript - 重新创建时 knockout PureCompulated 调用订阅者

Question

我有一个包含数据集的表单。当我单击一组(或行)时，它会使用该组数据填充表单。

对于每一组，我都有一个 pureCompulated 对象，只要其中一个输入发生更改，该对象就会更新数据库。

这工作正常，只是当我单击不同的集合时，pureCompulated 会调用更新。我希望这种情况不会发生，因为我使用构造函数构建了一组输入，因此我基本上替换了所有可观察量及其各自的 pureCompulated 属性。

例如:

var Form = function (data) {
    var $this = this;
    $this.value1 = ko.observable(data.value1);
    $this.value2 = ko.observable(data.value2);
    $this.model = ko.pureComputed(function () {
        return {
            value1: $this.value1(),
            value2: $this.value2(),
        };
    }).extend({ updateModel: url }); 
};

//Inside some module
var self = this;
self.viewmodel = {};

var load = function (url) {
    $.ajax({
        url: url, //etc
    }).done(function (response) {
        self.viewmodel.form(new Form(response));
    });
};
load('www.myapi.com/1');

var onClick = function () {
    load('www.myapi.com/2');
};

此外，页面加载时不会调用更新。为什么当我点击新行时会调用它？

编辑:UpdateModel代码...

ko.extenders.updateModel = function (target, options) {
    var url = options;

    target.subscribe(function (model) {
        $.ajax({
            url: url,
        }).done(function (response) {
            /* not setting any observables */
        });
    };

    return target;
};

编辑2:上面的内容实际上在我的代码中有效。我将罪魁祸首的范围缩小到了下拉菜单的 knockout 绑定(bind)。

每个表单的一部分是一个下拉列表。我对下拉菜单使用了 knockout 的内置绑定(bind)，并包含了一个占位符。如果下拉列表的值为 null 或 0，则该值将调用订阅。如果大于 0 就可以了。

Answer 1

我已使用您的代码并在此处创建了一个工作示例版本。除非值发生更改，否则它不会运行更新函数。换句话说，“点击”不会更新任何内容。

ko.extenders.updateModel = function (target, options) {
  var url = options;

  target.subscribe(function (foo) {
    console.log(url, foo);
  });

  return target;
};

var Form = function (data) {
  var $this = this;
  $this.value1 = ko.observable(data.value1);
  $this.value2 = ko.observable(data.value2);
  $this.model = ko.pureComputed(function () {
    return {
      value1: $this.value1(),
      value2: $this.value2(),
    };
  }).extend({ updateModel: data.url }); 
};

//Inside some module
var vm = {};
vm.viewmodel = {
  form: ko.observable()
};

var counter = 0;
var load = function (url) {
  url = url + (++counter);
  setTimeout(function () {
    vm.viewmodel.form(new Form({
      value1: "1"+counter,
      value2: "2"+counter,
      url: url
    }));
  }, 100);
};

load('www.myapi.com/');

vm.onClick = function () {
  load('www.myapi.com/');
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div data-bind="with: viewmodel.form">
  <input data-bind="value: value1">
  <input data-bind="value: value2">
</div>
<button type="button" data-bind="click: onClick">click</button>