Question

我通常对Knockout和JavaScript还是陌生的，我试图弄清楚如何使它正常工作，我试图使用kickout.js创建一个简单的购物清单应用程序，目前在添加商品名称的位置使用它和数量添加到表格中，但是它将它们分别添加为单独的行，而不是行和列。

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>

使用淘汰赛向表中添加行

1 个答案: