Question

我正在尝试根据用户输入的内容创建一个计算变量（RateDisplay）（如果VRAChecked为真，则为MinRate，MaxRate，否则为FlatRate），定义为可观察对象。我有一个对象（产品）作为viewmodel的一部分，如下所示：

var viewModel = new function () {

var self = this;
self.Id = ko.observable();

self.product = {
  Id: ko.observable(),
  Name: ko.observable(),
  VRAChecked: ko.observable(false),
  MinRate: ko.observable(),
  MaxRate: ko.observable(),
  FlatRate: ko.observable(),
  RateDisplay: ko.computed(function() {
    if (self.product.VRAChecked())
      {
        return self.product.MinRate() + "-" + self.product.MaxRate();
      }
      else
      {
        return self.product.FlatRate();
      }
  }, this),

  PercentageGoal: ko.observable()
};

  };//viewmodel ends

问题是，我得到这个js错误：“self.product未定义”在该行

  if (self.product.VRAChecked())

据我所知，这可能是因为对象仍在创建中。

那么，我该如何创建计算变量（RateDisplay）？我需要它作为该对象（产品）的一个元素。

Answer 1

问题是您在创建其他computed属性之前创建了product，然后，它们尚未定义。

尝试仅在product声明之后创建它，它将像魅力一样工作。

看一下下面的例子：

var viewModel = function() {
  var self = this;
  self.Id = ko.observable();
  self.product = {
    Id: ko.observable(),
    Name: ko.observable(),
    VRAChecked: ko.observable(false),
    MinRate: ko.observable(),
    MaxRate: ko.observable(),
    FlatRate: ko.observable(),
    PercentageGoal: ko.observable()
  };
  
  self.product.RateDisplay = ko.computed(function() {
      if (self.product.VRAChecked()) {
        return self.product.MinRate() + "-" + this.product.MaxRate();
      } else {
        return self.product.FlatRate();
      }
    }, self)
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <label>Min Rate <input type="textbox" data-bind="value: product.MinRate"></label>
  <label>Max Rate <input type="textbox" data-bind="value: product.MaxRate"></label>
</div>
<div>
  <label>Flat Rate <input type="textbox" data-bind="value: product.FlatRate"></label>
</div>
<div>
  <label><input type="checkbox" data-bind="checked: product.VRAChecked"> VRA Checked</label>
</div>
<div>Display: <span data-bind="text: product.RateDisplay"></span></div>

knockout js - 在对象

1 个答案: