KnockoutJS - показать накопленную стоимость для каждого элемента

Question

KnockoutJS - показать накопленную стоимость для каждого элемента

1

Как я могу отображать в таблице значение накопления для каждого элемента в наблюдаемом массиве с помощью KnockoutJS?

Мне нужно что-то вроде:

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

В последнем столбце должна отображаться сумма текущего элемента + переднего элемента. Благодарю.

Weberth Fernandes 07 июнь 2017, в 14:01

Источник

Теги:

javascript

knockout.js

1 ответ

Ещё вопросы

user3297291 · Accepted Answer · 2017-06-07T11-01-00.000Z

Я не совсем уверен, какое значение вы хотите иметь в третьем столбце, но основной подход остается тем же:

Предоставьте доступ классу Item к своим "родственным элементам", передав ссылку на массив
В вычисленном свойстве, "загляните", просмотрите собственный индекс предметов.
Выполните какой-то расчет между двумя (или более) экземплярами Item и верните значение

Например, это свойство acc возвращает acc предыдущего Item и свойство собственной note:

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