KnockoutJS - zeigen akkumulieren Wert für jeden Artikel

Question

Wie kann ich in einer Tabelle den akkumulierten Wert für jedes Element in einem ObservableArray mit KnockoutJS anzeigen?

Ich brauche irgendwas wie:

function ViewModel(){ 
 
var self = this; 
 

 
self.Item = function(day,note){ 
 
this.day = ko.observable(day); 
 
this.note = ko.observable(note); 
 
}; 
 
} 
 

 

 
var itemsFromServer = [ 
 
{day:'Mo', note:1}, 
 
{day:'Tu', note:2}, 
 
{day:'We', note:3}, 
 
{day:'Th', note:4}, 
 
{day:'Fr', note:5}, 
 
{day:'Su', note:6}, 
 
]; 
 

 
var vm = new ViewModel(); 
 

 
var arrItems = ko.utils.arrayMap(itemsFromServer, function(item) { 
 
    return new vm.Item(item.day, item.note); 
 
    }); 
 
    
 
ko.applyBindings(vm);

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

 
<table> 
 
    <thead> 
 
     <tr><th>Day</th><th>Note</th><th>Accumulate</th></tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: arrItems"> 
 
     <tr> 
 
      <td data-bind="text: day"></td> 
 
      <td data-bind="text: note"></td> 
 
      <td >the currente 'note' + the anterior 'note'</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Die letzte Spalte sollte die Summe des aktuellen Postens + vorderen Element angezeigt werden soll. Danke.

Answer 1

Ich bin mir nicht ganz sicher, welcher Wert Sie die dritte Spalte sein wollen, aber der wichtigste Ansatz bleibt das gleiche:

• Geben Sie Ihren Item Klasse Zugriff auf ihren „Geschwister Artikel“ durch einen Verweis vorbei an das Array
• In einer berechneten Eigenschaft, ein "Blick hinter" durch Nachschlagen der Artikel eigenen Index.
• irgendeine Art von Berechnung zwischen zwei Perform (oder mehr) Item Instanzen und gibt den Wert

Zum Beispiel dieser acc Eigenschaft der acc der vorherigen Item zurückzugibt und die eigenen note Eigenschaft:

var Item = function(day, note, siblings){ 
 
    this.day = ko.observable(day); 
 
    this.note = ko.observable(note); 
 

 
    this.acc = ko.pureComputed(function() { 
 
    var allItems = siblings(); 
 
    var myIndex = allItems.indexOf(this); 
 
    
 
    var base = myIndex > 0 
 
     ? allItems[myIndex - 1].acc() 
 
     : 0 
 
    
 
    return base + this.note(); 
 
    }, this); 
 
}; 
 

 
function ViewModel() { 
 
    var self = this; 
 

 
    self.items = ko.observableArray([]); 
 
    
 
    self.items(itemsFromServer.map(function(item) { 
 
     return new Item(item.day, item.note, self.items); 
 
    }) 
 
); 
 
} 
 

 

 
var itemsFromServer = [ 
 
    {day:'Mo', note:1}, 
 
    {day:'Tu', note:2}, 
 
    {day:'We', note:3}, 
 
    {day:'Th', note:4}, 
 
    {day:'Fr', note:5}, 
 
    {day:'Su', note:6}, 
 
]; 
 

 
ko.applyBindings(new ViewModel());

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

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Day</th> 
 
     <th>Note</th> 
 
     <th>Accumulate</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: items"> 
 
    <tr> 
 
     <td data-bind="text: day"></td> 
 
     <td data-bind="text: note"></td> 
 
     <td data-bind="text: acc"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>