knockoutjs：如何观察静态 html 表？

Question

我有一个包含现有行的 html 表。我想将所有行映射为可观察对象的可观察数组，所以如果我更改行的输入值，我的可观察数组上的对象就知道了。

这可能吗？

Answer 1

我同意用户 3297291。但是您可以使用 html 表来加载 observable 数组。运行下面的代码。或者你可以在这里玩https://jsfiddle.net/7zop2n9j/12/你可以通过填写表单点击添加来向表格添加新行并更新可观察数组

function tableRow(material, quantity, unitPrice) {
  var self = this;
  this.material = ko.observable(material);
  this.quantity = ko.observable(quantity);
  this.unitPrice = ko.observable(unitPrice);
}

function model() {
  var self = this;
  this.material = ko.observable('');
  this.quantity = ko.observable('');
  this.unitPrice = ko.observable('');
  this.tableRows = ko.observableArray('');
  this.addRow = function() {
    myViewModel.tableRows.push(new tableRow(
      self.material(),
      self.quantity(),
      self.unitPrice()));
  }
}

var myViewModel = new model();

$(document).ready(function() {
  ko.applyBindings(myViewModel);
  $('#baseTable tbody tr').map(function(i, row) {
    myViewModel.tableRows.push(new tableRow(
      row.cells[0].textContent,
      row.cells[1].textContent,
      row.cells[2].textContent));
  });
});

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table id="baseTable" style="display: none;">
  <thead>
    <tr>
      <th>Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Acrylic (Transparent)</td>
      <td>25</td>
      <td>2.90</td>
    </tr>
    <tr>
      <td>Plywood (Birch)</td>
      <td>50</td>
      <td>1.25</td>
    </tr>
    <tr>
      <td>Laminate (Gold on Blue)</td>
      <td>50</td>
      <td>1.25</td>
    </tr>
  </tbody>
</table>

<table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: tableRows">
    <tr>
      <td class="mdl-data-table__cell--non-numeric" data-bind="text: material"></td>
      <td data-bind="text: quantity"></td>
      <td data-bind="text: unitPrice"></td>
    </tr>
  </tbody>
</table>
<p>
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="material" data-bind="value: material">
    <label class="mdl-textfield__label" for="material">Material...</label>
  </div>
</p>

<p>
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="quantity" data-bind="value: quantity">
    <label class="mdl-textfield__label" for="quantity">Quantity...</label>
  </div>
</p>
<p>
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="unitPrice" data-bind="value: unitPrice">
    <label class="mdl-textfield__label" for="unitPrice">unitPrice...</label>
  </div>
</p>

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" data-bind="click:addRow">
  <i class="material-icons">add</i> 
</button>