ノックアウト計算機能を使用してテキストを更新する

Question

テーブルでは、観測可能な配列内のboolにチェックボックスがバインドされています。

表内のチェックボックスのいずれかがチェック/チェックされていない場合は、チェックされた合計でいくつかのテキストを更新したいと思います。

計算された関数を呼び出すことができません。以下のif文で配列とlocation.isSelectedの両方でko.utils.unwrapObservableを使用してみましたが、間違った場所で使用していますか？ location.isSelected == true：問題の

<input type="checkbox" data-bind="checked: isSelected"/> 

<span class="text-left h5 ">Total Selected:</span><span data-bind="text: totalSelected" /> 


self.totalSelected = ko.computed(function() { 
    var selected = 0; 
    ko.utils.arrayForEach(self.SelectedLocations(), function (location) { 
     if (location.isSelected == true) { 
      selected = (+selected) + 1; 
     } 
    }); 
    return selected; 
}, self).extend({ notify: 'always' }); 

Answer 1

一つはisSelectedが計算内部変数のように扱われていることです。ただし、チェックボックスをバインドする場合は、オブザーバブルである必要があります。次のように、あなたが計算された変数でカウントを変更することができます次に

var locationObservable = function() { 
    var self = this; 
    self.isSelected = ko.observable(false); 
}; 

：

だから、私はself.SelectedLocationsの子を作成する機能を宣言した

if (loc.isSelected()) { 
    selected++; 
    } 

var locationObservable = function(selected) { 
 
    var self = this; 
 
    self.isSelected = ko.observable(selected); 
 
}; 
 

 
var model = function() { 
 
    var self = this; 
 

 
    self.SelectedLocations = ko.observableArray(); 
 
    self.SelectedLocations.push(new locationObservable(false)); // Set the state of the checkbox here. 
 
    self.SelectedLocations.push(new locationObservable(true)); 
 
    self.SelectedLocations.push(new locationObservable(false)); 
 

 
    self.totalSelected = ko.computed(function() { 
 
    var selected = 0; 
 
    ko.utils.arrayForEach(self.SelectedLocations(), function(loc) { 
 
     if (loc.isSelected()) { 
 
     selected++; 
 
     } 
 
    }); 
 
    return selected; 
 
    }, self); 
 
}; 
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<div data-bind="foreach: SelectedLocations"> 
 
    <input type="checkbox" data-bind="checked: isSelected" /> 
 
</div> 
 

 

 
<span class="text-left h5 ">Total Selected:</span><span data-bind="text: totalSelected" />