0

サブバーにさまざまな数の値を表示するバーがあります。バーの全幅は固定されています。値が変更されるたびに、すべての値の新しい合計の比率としてすべてのバーの幅を再計算する必要があります。

サブバーは、knockout.jsの監視可能な配列に基づいてテンプレート化されています。

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

配列自体は、初期幅と値をサブバーに渡します。

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

viewModelの変数（subBarから直接関数）にアクセスすることはできません。

このように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計算されたオブザーバブルにパラメーターを渡すことができます。knockoutjsを参照してください：パラメーターを使用してdependentObservable関数を作成できますか？

したがって、subBarsTotal計算されたオブザーバブルに値を渡すだけです。これにより、デザインが結合しすぎるのを防ぐことができます。

于 2012-08-03T13:19:39.543 に答える