javascript - 阵列中的 knockout 阵列

Question

我正在尝试使用 Knockout 创建一个简单的电子表格。我试图让每个单元格都可观察，以便在发生变化时，我可以评估值并进行相应的计算。因此，如果他们在单元格中输入 6+7，我可以评估并将该值更改为总数。

但是，我无法让每个单元格都可见。也许我做错了。

我曾尝试创建一个 fiddle ，但现在正在努力加载 jquery。因此，尽管我可以在本地 Visual Studio 中运行它，但 fiddle 会提示 $. (任何解决问题的帮助都会很棒)。

http://jsfiddle.net/tr9asadp/1/

我像这样生成我的可观察数组: self.RowCount = ko.observable(0); self.ColumnCount = ko.observable(0);

self.Columns = ko.observableArray([]);
self.Rows = ko.observableArray([]);

self.Refresh = function () {

    for (i = 0; i < self.RowCount(); i++) {
        var obj = {
            data: i + 1,
            calculated: i,
            rowNum: i,
            colNum: 0,
            columns: ko.observableArray([])
        };

        for (j = 0; j < self.ColumnCount(); j++) {
            obj.columns.push(ko.observable({
                label: self.Letters[j],
                value: j + 1,
                colIndex: j, 
                rowIndex: i
            }));
        }
        self.Rows.push(obj);

    }
    self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0);

我根据用户输入的列和行呈现一个表格(目前，限制为 5 x 5，因为我使用数组将 1、2、3(列)转换为 A、B、C。但是这是暂时的，将被修复。

如何让每个单元格都可见，以便我可以订阅并在发生变化时触发事件？

Answer 1

您似乎没有使用cellObject(来自您的 fiddle )。如果您将 cellObject 类型的对象添加到行中，并且其中有一个针对 value 的可观察对象，您可以订阅它的更改。

固定代码:

var cellObject = function() {
  var self = this;
  self.data = ko.observable();
  self.calculated = ko.observable();
  self.rowNum = ko.observable(0);
  self.colNum = ko.observable(0);
  self.rows = ko.observableArray([]);
  self.value = ko.observable();
}

function SpreadsheetViewModel() {
  var self = this;
  self.ShowSheet = ko.observable(false);
  self.ShowSheet(false);

  self.Letters = ['A', 'B', 'C', 'D', 'E']


  self.RowCount = ko.observable(0);
  self.ColumnCount = ko.observable(0);

  self.Columns = ko.observableArray([]);
  self.Rows = ko.observableArray([]);

  function valueChanged(newValue) {
    console.log("Value changed to " + newValue);
  }

  self.Refresh = function() {

    for (i = 0; i < self.RowCount(); i++) {
      var row = {
        cells: ko.observableArray([])
      };

      for (j = 0; j < self.ColumnCount(); j++) {
        var cell = new cellObject();
        cell.label = self.Letters[j];
        cell.data(i + 1);
        cell.calculated(i);
        cell.rowNum(i);
        cell.colNum(j);
        cell.value(j + 1);

        cell.value.subscribe(valueChanged);
        row.cells.push(cell);
      }
      self.Rows.push(row);

    }
    self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0);
  }

  self.Refresh();

}

var vm = new SpreadsheetViewModel();
ko.applyBindings(vm);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="spreadsheetSection">

  <div class="row">
    <div class="col-xs-3 text-right">No. of Columns</div>
    <div class="col-xs-2">
      <input type="text" class="form-control" placeholder="Columns" data-bind="value: ColumnCount">
    </div>
    <div class="col-xs-3 text-right">No. of Rows</div>
    <div class="col-xs-2">
      <input type="text" class="form-control" placeholder="Rows" data-bind="value: RowCount">
    </div>
    <div class="col-xs-2">
      <button class="btn btn-default" data-bind="click: Refresh">Refresh</button>
    </div>
  </div>
  <div class="row">
    <!-- ko if: ShowSheet -->
    <table class="table table-bordered table-hover table-striped">
      <tbody>
        <tr data-bind="foreach: Rows()[0].cells">
          <td>
            <span data-bind="text: label"></span>
          </td>

        </tr>
      </tbody>
      <tbody data-bind="foreach: Rows">
        <tr data-bind="foreach: cells">
          <td>
            <input type="text" class="form-control" data-bind="value: value">
          </td>
        </tr>
      </tbody>
    </table>
    <!-- /ko -->
  </div>
</div>

固定 fiddle :https://jsfiddle.net/tr9asadp/3/