使用敲除将行添加到 table

Question

我对 Knockout 还很陌生，一般来说 JavaScript，我想弄清楚如何让它工作我正在尝试使用 knockout.js 创建一个简单的购物清单应用程序我有它目前正在将项目名称和数量添加到 table 中，但是它将它们添加为单独的行而不是行和列。

HTML Table issue

var SimpleListModel = function(items) {
  self = this;
  self.items = ko.observableArray(items);

  self.itemToAdd = ko.observable("");
  self.quantityToAdd = ko.observable("");

  self.deleteItem = function(item) {
    self.items.remove(item);
    return self.items;
  }

  self.addItem = function() {
    if (self.itemToAdd() != "") {
      self.items.push(self.itemToAdd());
      self.itemToAdd("");
    }
    if (self.quantityToAdd() != "") {
      self.items.push(self.quantityToAdd());
      self.quantityToAdd("");
    }
  }.bind(this);
};

ko.applyBindings(new SimpleListModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="submit: addItem">
  New item:<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> Quantity:
  <input data-bind='value: quantityToAdd, valueUpdate: "afterkeydown"' />
  <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>
<p></p>
<table border="1">
  <thead>
    <th>Item</th>
    <th>Quantity</th>
    <th>Remove</th>
  </thead>
  <tbody data-bind="foreach:items">
    <tr>
      <td data-bind="text: $data"></td>
      <td><input type="button" data-bind="click:$root.deleteItem" value="X"></input>
      </td>
    </tr>
  </tbody>
</table>

预期结果需要是：

Expected result image

Answer 1

那是因为您将商品和数量作为单独的商品添加到商品数组中。您需要改用对象：

var SimpleListModel = function(items) {
  self = this;
  self.items = ko.observableArray(items);

  self.itemToAdd = ko.observable("");
  self.quantityToAdd = ko.observable("");

  self.deleteItem = function(item) {
    self.items.remove(item);
    return self.items;
  }

  self.addItem = function() {
    if (self.itemToAdd() && self.quantityToAdd()) {
      self.items.push({ item: self.itemToAdd(), quantity: self.quantityToAdd() });
      self.itemToAdd("");
      self.quantityToAdd("");
    }
  };
};

ko.applyBindings(new SimpleListModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="submit: addItem">
  New item:<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> Quantity:
  <input data-bind='value: quantityToAdd, valueUpdate: "afterkeydown"' />
  <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>
<p></p>
<table border="1">
  <thead>
    <th>Item</th>
    <th>Quantity</th>
    <th>Remove</th>
  </thead>
  <tbody data-bind="foreach:items">
    <tr>
      <td data-bind="text: item"></td>
      <td data-bind="text: quantity"></td>
      <td><input type="button" data-bind="click:$root.deleteItem" value="X"></input>
      </td>
    </tr>
  </tbody>
</table>

使用敲除将行添加到 table

Add row to table using knockout

javascript

knockout.js