knockout 계산 함수를 사용하여 텍스트 업데이트

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" />