从Knockout.JS访问外部值observableArray项目的构造函数

Question

我有一个栏在子栏中显示varibale数量的值。酒吧的总宽度是固定的。每当一个值发生变化时，我需要重新计算所有柱的宽度，作为所有值的新总和的比例。

子杆模板基于knockout.js观察到阵列上：

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

数组本身经过初始宽度和一个值到subBars：

this.subBars = ko.observableArray ([ 
    new subBar(initialWidth01, color01); 
    new subBar(initialWidth02, color02); 
]); 

每当值对于子条更改，所有值的总和计算为

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

w在视图模型中。

的subBar功能，视图模型之外，就是：

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的价值。

我在这里没有看到什么？

（编辑：错字） （编辑：全码） （编辑：返朴归真 - 整个代码不

Answer 1

你不能达到视图模型的变量 - 直接从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 subBar (initialWidth, color) {   
     self.initialWidth = initialWidth; 
     self.width = ok.computed(function(){ 
     var adjustedWidth = self.initialWidth()/viewModel.subBarsTotal() * widthOfBar; 
     return adjustedWidth; 
     } 
     self.color = color; 
} 

或者你也可以通过视图模型的实例subBar这样的：

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(); 
    ... 
} 

编辑：

我改变你的代码点点。在定义的计算函数后推送数组值。

入住这JsFiddle link

function hundred_bar_section(width, color, dvm) { 
    this.hundred_width = ko.observable(width); 
    this.section_color = color; 
    console.log(dvm.hundred_bar_total()); // is now defined 
} 

function DashboardViewModel() { 
    var self = this; 
    this.hundred_bar_sections = ko.observableArray([]); 
    // adds the total current values of all hundred_bar_section widths 
    this.hundred_bar_total = ko.computed(function() { 
     var hundred_bar_length = self.hundred_bar_sections().length; 
     //console.log (hundred_bar_length); 
     var hundred_bar_added = 0; 
     for (var i = 0; i < hundred_bar_length; i++) { 
      hundred_bar_added += self.hundred_bar_sections()[i].hundred_width(); 
     } 
     console.log(hundred_bar_added); 
     return hundred_bar_added; 
    }); 

    this.hundred_bar_sections.push(new hundred_bar_section(100, "#f60", self)); 
    this.hundred_bar_sections.push(new hundred_bar_section(200, "#6f0", self)); 
    this.hundred_bar_sections.push(new hundred_bar_section(100, "#06f", self)); 

} 

$(document).ready(function() { 

    var vm = new DashboardViewModel(); 
    ko.applyBindings(vm); 

})​ 

Answer 2

您可以将参数传递给你的width计算观测。请参阅knockoutjs: can we create a dependentObservable function with a parameter?

因此，我只是将subBarsTotal值传递到您的计算可观察值。这将避免让你的设计过度耦合。