Question

我有模型＆＃39;搜索参数＆＃39;，它有两个属性title和priceMax，两者都是必需的。当用户更改属性时，脚本会更新API中的商品数量。更新是执行，当模型＆＃39; searchParameters＆＃39;没有错误。问题在于metodh，它返回模型中的计数错误。当title和priceMax有值时，方法返回错误，只有当我再次更改model的属性时方法返回值为0.任何想法？这是我的解决方案。

HTML

   <fieldset>
      <div class="row">
        <label>Title:</label>
        <input type="text" data-bind="textInput: searchParameters.title" />

      </div>

      <div class="row">
        <label>Price max:</label>
        <input data-bind="textInput: searchParameters.priceMax" />

      </div>
      <div class="row">
        <label>count offers:</label>
        <span data-bind="text: countOffers"></span>
      </div>
      <div class="row" data-bind="visible:visibleProgress">
        progress...
      </div>
    </fieldset>

JS

function ViewModel() {
  var self = this;
  self.countOffers = ko.observable(0);
  self.visibleProgress = ko.observable(false);
  ko.extenders.refreshCountOffers = function(target, timeout) {
    var timerId = null;
    target.subscribe(function(newValue) {
      console.log(self.errors());
      if (self.errors().length === 0) {
        clearTimeout(timerId);
        timerId = setTimeout(function() {
          self.visibleProgress(true);
          //mock api
          $.ajax({
            url: '/echo/js/?js=' + Math.floor((Math.random() * 100)),
            data: {
              delay: 2
            },
            complete: function(response) {
              self.countOffers(response.responseText);
              self.visibleProgress(false);
            }
          });
          //mock api
        }, 500);
      } else
        self.countOffers(0);
    });
    return target;
  };
  self.searchParameters = {
    title: ko.observable().extend({
      refreshCountOffers: 500
    }).extend({
      required: true
    }),
    priceMax: ko.observable().extend({
      refreshCountOffers: 500
    }).extend({
      required: true
    })
  };
  self.errors = ko.validation.group(self.searchParameters);
};

var model = new ViewModel();
ko.applyBindings(model);

我的jsfiddle

Answer 1

这是由于您申请扩展程序的顺序。当你扩展一个observable时，每个扩展器都会在前一个扩展器的结果上串行运行。

因此，您的代码扩展了原始 observable（订阅更改的位置），然后再次扩展observable以使其成为必需。

说实话，我并不是100％确定knockout-validation正在对导致你看到的行为的源可观察对象做了什么，但是如果你颠倒了扩展器的顺序（如this jsFiddle中那么）那么您保证您的自定义扩展程序将在最终版本中运行。可观察的，因此可以按预期工作。

self.user = {
  firstName: ko.observable().extend({
    required: true,
    refreshCountOffers: 500
  }),
  lastName: ko.observable().extend({
    required: true,
    refreshCountOffers: 500
  })
};

更改后的淘汰验证订阅更新

1 个答案: