Arrays 从Knockout.JS observableArray项构造函数中访问外部值

我有一个条形图，它在子条形图中显示不同数量的值。钢筋的总宽度是固定的。每当一个值改变时，我需要重新计算所有条的宽度，作为所有值的新和的比例

子栏基于knockout.js可观察数组进行模板化：

<div data-bind="foreach: subBars">
   <div data-bind="style: { width: (width() + 'px'), backgroundColor: color }"></div>
</div>

每当更改子道路的值时，所有值的总和计算为：

this.subBarsTotal = ok.computed... (this works)

在视图模型中

视图模型之外的子栏功能是：

function subBar (initialWidth, color) {
  var self = this;
  self.initialWidth = initialWidth; 
  self.width = ok.computed(function(){
     var adjustedWidth = self.initialWidth() / subBarsTotal() * widthOfBar;  
  return adjustedWidth;
  }
  self.color = color;
}

无论我做了多少尝试，我都没有找到一种方法来获取subBarsTotal的值

我在这里看不到什么

（编辑：打字错误） （编辑：全部代码）

---

（编辑：返回基本-整个代码不

您无法访问viewModel的变量-直接从子栏访问函数

如果您这样定义viewModel：

function vm() {
  var self = this;
  this.subBars = ko.observableArray ([
     new subBar(initialWidth01, color01);
     new subBar(initialWidth02, color02);
  ]);
  this.subBarsTotal = ko.computed(function(){...});  
  ...
}

var viewModel = new vm();

function vm() {
   var self = this;
   this.subBars = ko.observableArray ([
     new subBar(initialWidth01, color01, self);
     new subBar(initialWidth02, color02, self);
   ]);
}

function subBar (initialWidth, color , vm) {
   ...
   vm.subBarsTotal();
   ...
}

您可以调用其属性：

function subBar (initialWidth, color) {          
      self.initialWidth = initialWidth; 
      self.width = ok.computed(function(){
         var adjustedWidth = self.initialWidth() / viewModel.subBarsTotal() * widthOfBar;  
      return adjustedWidth;
      }
      self.color = color;
}

或者，您也可以将viewModel的实例传递给subBar，如下所示：

function vm() {
  var self = this;
  this.subBars = ko.observableArray ([
     new subBar(initialWidth01, color01);
     new subBar(initialWidth02, color02);
  ]);
  this.subBarsTotal = ko.computed(function(){...});  
  ...
}

var viewModel = new vm();

function vm() {
   var self = this;
   this.subBars = ko.observableArray ([
     new subBar(initialWidth01, color01, self);
     new subBar(initialWidth02, color02, self);
   ]);
}

function subBar (initialWidth, color , vm) {
   ...
   vm.subBarsTotal();
   ...
}

编辑：

我稍微修改了你的代码。在定义了计算函数之后推送数组值

检查这个

功能百条（宽度、颜色、dvm）{
这个百分之一百的宽度=可观察到的ko（宽度）；
此.section_color=颜色；
console.log（dvm.hund_bar_total（））；//现在已定义
}
函数DashboardViewModel（）{
var self=这个；
此百巴截面=ko.observearray（[]）；
//添加所有百条截面宽度的当前总值
this.hundu bar_total=ko.computed（函数（）{
var百巴长度=自.百巴长度（）；
//console.log（百巴长）；
var百巴加=0；
对于（变量i=0；i<百巴长度；i++）{
添加的百分百条+=self；
}
控制台日志（增加了百巴）；
返回已添加的百巴；
});
这个。百巴图。推（新的百巴图部分（100，“f60”，自我））；
这个。百巴。推（新的百巴（200，#6f0），自）；
这个。百巴图。推（新的百巴图部分（100，#06f，self））；
}
$（文档）.ready（函数（）{
var vm=新的仪表板视图模型（）；
ko.应用绑定（vm）；
})​

您可以将一个参数传递给您的

宽度

计算的可观测值。请参阅

---

因此，我只需将

subBarsTotal

值传递到您的计算可观测值中。这将避免使您的设计过于耦合。

您在哪里定义了subBar？您的计算函数必须是ko.computed not ok.computed。（可能是输入错误）更正了输入错误。SubBar被定义为一个常规函数。我编辑了我的答案，并提供了工作的JSFIDLE链接来解决您的问题。是的，就像Mark说的，您也可以将只需要的变量传递给函数。但是如果您想使用viewModel中定义的其他函数和变量，我认为传递viewModel实例是一种快捷方式。谢谢修改后的代码解决了这里的基本问题：self被传递到可观察数组中，但它在传递时是这样的。如果数组最初被填充，在数组元素函数中需要访问的所有函数都被定义之前，那么这些函数就会丢失。