0

我有一个条形图，它在子条形图中显示可变数量的值。条的总宽度是固定的。每当一个值发生变化时，我需要将所有条形的宽度重新计算为所有值的新总和的比例。

子栏是基于 knockout.js 可观察数组的模板：

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

Array 本身将一个初始宽度和一个值传递给 subBars：

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

每当 subBar 的值发生更改时，所有值的总和计算为

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

在视图模型中。

视图模型之外的 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 值的方法。

我在这里没有看到什么？

（编辑：错字）（编辑：整个代码）（编辑：回到基础 - 整个代码不是

4

2 回答 2

0

您无法直接从 subBar 访问 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 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, self);
     new subBar(initialWidth02, color02, self);
   ]);
}

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

编辑 ：

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

检查这个JsFiddle 链接 

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);

})​
于 2012-08-03T13:11:35.080 回答
0

您可以将参数传递给您width计算的 observable。参见knockoutjs：我们可以创建一个带参数的dependentObservable 函数吗？

因此，我只是将subBarsTotal值传递给您计算的 observable。这将避免使您的设计过于耦合。

于 2012-08-03T13:19:39.543 回答