Question

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

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

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

Array本身将初始宽度和值传递到子栏：

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值的方法。

我在这里看不到什么？

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

Answer 1

你无法直接从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 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计算的observable。见knockoutjs: can we create a dependentObservable function with a parameter?

因此，我只需将subBarsTotal值传递给您计算的observable。这样可以避免让你的设计过于紧密。

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

2 个答案: