剔除js - 访问变量内部对象

Question

我想创建一个计算变量（RateDisplay），基于用户输入的内容（MinRate，MaxRate，如果VRAChecked为true，否则为FlatRate）定义为可观察。我有一个对象（产品）作为像视图模型的一部分下面：

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错误：在该行

if (self.product.VRAChecked()) 

“self.product是未定义”我明白，这可能是因为该对象仍在创建。

那么，如何创建计算变量（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>