Question

我的表单中有一个输入字段，名为'Quantity to Issue'和两个显示字段，称为'计划数量'和'已发布数量'。

用户可以在“要发放的数量”字段中输入值。这也会更新显示字段'Issued Quantity'中的值，因为它绑定到同一个observable。

然而，当我的输入字段'Quantity to Issue'的值为零时应用程序启动时，我希望将其值初始化为'Planned Quantity'，这可以帮助用户，如果他们不想输入任何值。

问题是，当用户在“要发放的数量”字段中输入值时，它不会更新为用户值，但仍然绑定到计划数量。

我使用计算的observable执行此操作，该observable检查issueQuantity的值是否为零。如果是，则它将plannedQuantity的值分配给issueQunatity并返回它。

在计算的observable中我使用了write函数。在用户输入的情况下，我使用它来更新issueQuantity observable。

问题是我的写功能不起作用。输入字段仍具有旧值，并且不会使用我计算的写入函数来更新用户输入值。

我的小提琴就在这里......

my knockout fiddle

    var viewmodel = {
                issuedQty: ko.observable(0),
                plannedQty: ko.observable(10),

            };

 viewmodel.defaultIfNull = ko.computed({
                                read: function () {
                                    if (IssuedQuantity() === 0) {
                                        issuedQty() = plannedQty()
                                        return issuedQty();
                                    } else if (issuedQty() > 0) {
                                        return issuedQty();
                                    }
                                    return 0;

                                },
                                write: function(value) {
                                    value = parseInt(value);
                                     return issuedQty(value);
                                },
                                owner: viewmodel
                            });


 ko.applyBindings(viewmodel);

Answer 1

我想你想要的是......

工作小提琴：https://jsfiddle.net/miketalley/2o3hfvfd/24/

观点......

<table>
  <thead>
    <tr>
      <th>Planned Quantity</th>
      <th>Quantity to Issued</th>
      <th>Issued Quantity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span data-bind="text: plannedQty"></td>
      <td><input class="a" type="text" data-bind="value: defaultIfNull"></td>
      <td><span data-bind="text: issuedQty"></td>
    </tr>
  </tbody>
</table>

...和viewmodel ......

jQuery(document).ready(function() {
  var ViewModel = function(){
    var self = this;

    self.issuedQty = ko.observable(),
    self.plannedQty = ko.observable(10),

    self.defaultIfNull = ko.computed({
      read: function () {
        if (!self.issuedQty()) {
          // This will run if 0 or undefined
          self.issuedQty(self.plannedQty());
          return self.issuedQty();
        } else {
          return self.issuedQty();
        }
      },
      write: function(value) {
        value = parseInt(value);
        return self.issuedQty(value);
      }
    });
  };

  ko.applyBindings(new ViewModel());

});

使用用户输入覆盖可观察的输入字段的默认值，并将其传递给服务器

1 个答案: