The other day I asked a question (here). Someone kindly replied, and their answer does what I orginally intended it to do. However, there's some code I don't understand and I was hoping someone could help me.
self.currentlySelected = ko.computed(function() {
return self.topics().reduce(function(count, topic) {
return count + (topic.selected() ? 1 : 0);
}, 0);
});
Would anyone be kind enough to explain what this function is doing? Thank you!
It says that currentlySelected is a computed property - to see it's value, you have to evaluate a function.
The function says:
1. Get the topics
2. Reduce the topics down to a single value, using the following function
3. If the topic is selected, add 1 to our running total (count).
Otherwise, add 0. Our initial value for count is 0.
It is using a reduce method on your list of topics, it is traversing each item in your topics observable array, checking to see if it is selected and then adding all of those up. it could look like this too:
self.currentlySelected = ko.computed(function() {
var count = 0
for(var i = 0; i < self.topics().length; i++){
var topic = self.topics()[i]
if(topic.selected()){
count += 1;
}
}
return count
});
the .reduce method is native Javascript method and more can be found Here
the .computed method is knockout.js and is explained pretty well Here
Let's start from the inside out
self.topics().reduce(/* code... */, 0) - this is calling Array.prototype.reduce() on the array stored in self.topics. This function works on a collection and reduces it down to a single value - in this case, it's count + (topic.selected() ? 1 : 0), so it returns the count of selected topics. The final part, which is the zero passed last after the counting code self.topics().reduce(/* code... */, 0) is the initial value of the count. So, it's start from zero, count each selected topic, return the result.
ko.computed(function() { /* reduction code */ }); is creating a computed observable which is an Knockout observable that automatically changes if any observables it is relying on change. In this case, this is self.topics - any change to those (like adding/removing them) would cause self.currentlySelected to be recalculated, so it would always display the...currently selected items. Their count, more specifically.
.reduce?.computed?