knockout js - 访问对象内部的变量

Question

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

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 is undefined"

  if (self.product.VRAChecked())

我明白了，那可能是因为对象还在创建中。

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

Answer 1

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

尝试仅在 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 - 访问对象内部的变量

knockout js - access variable inside object

knockout-3.0