Question

我有一个项目列表，我想显示所选项目的总数。项目列表被显示两次，因此，如果我检查第一个列表中的某个项目，则也检查第二个列表中的相同项目。问题是它没有计算总和（它显示为Nan）。

＆＃13;

{Id:1234 Meta:{Keywords:xml,parsing,partial} Name:Partial XML parsing Authors:[Bob Alice]}

＆＃13;

function Item(id, name, price) {
  this.id = id;
  this.name = name;
  this.price = price;
}

var listOfItems = [
  new Item(1, 'item1', 25),
  new Item(2, 'item2', 30),
  new Item(3, 'item3', 50)
];

function viewModel() {
  var self = this;
  self.items = ko.observableArray(listOfItems);
  self.selectedItem = ko.observableArray();

  self.Total = ko.computed(function() {
    var count = 0;
    ko.utils.arrayForEach(self.selectedItem(), function(r) {
      count += r.price;
    });
    return count;
  });
};
ko.applyBindings(new viewModel());

＆＃13;

Answer 1

我修改了你的样本：

＆＃13;

function Item(id, name, price) {
  this.id = id;
  this.name = name;
  this.price = price;
  this.checked = ko.observable(false);
}

var listOfItems = [
  new Item(1, 'item1', 25),
  new Item(2, 'item2', 30),
  new Item(3, 'item3', 50)
];

function viewModel() {
  var self = this;
  self.items = ko.observableArray(listOfItems);

  self.Total = ko.computed(function() {
    //return self.items().filter(function(item) { return item.checked(); }).length;
    return self.items().reduce(function(sum, item) { return item.checked() ? sum + item.price : sum; }, 0);
  });
};
ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<ul data-bind="foreach: items">
  <li>
    <input type="checkbox" value="" data-bind="checkedValue: id, checked: checked"><span data-bind="text: name"></span>
  </li>
</ul>

<ul data-bind="foreach: items">
  <li>
    <input type="checkbox" value="" data-bind="checkedValue: id, checked: checked"><span data-bind="text: name"></span>
  </li>
</ul>

<div data-bind="text:Total"></div>

＆＃13;

Answer 2

正如我已经评论过的，r中的r.price是一个整数，而不是一个对象。因此，你得到NaN。请尝试使用count += r。以下代码描述了相同的内容。

＆＃13;

function Item(id, name, price) {
  this.id = id;
  this.name = name;
  this.price = price;
}

var listOfItems = [
  new Item(1, 'item1', 25),
  new Item(2, 'item2', 30),
  new Item(3, 'item3', 50)
];

function viewModel() {
  var self = this;
  self.items = ko.observableArray(listOfItems);
  self.selectedItem = ko.observableArray();

  self.Total = ko.computed(function() {
    var count = 0;
    ko.utils.arrayForEach(self.selectedItem(), function(r) {
      console.log(r)
      count += r;
    });
    return count;
  });
};
ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<ul data-bind="foreach: items">
  <li>
    <input type="checkbox" value="" data-bind="checkedValue: id, checked: $parent.selectedItem"><span data-bind="text: name"></span>
  </li>
</ul>

<ul data-bind="foreach: items">
  <li>
    <input type="checkbox" value="" data-bind="checkedValue: id, checked: $parent.selectedItem"><span data-bind="text: name"></span>
  </li>
</ul>

<div data-bind="text:Total"></div>

＆＃13;

复选框的集合

2 个答案: